使用json顯示圖像

所有工作到從mysql獲取圖像src，移動到js文件，直到html工作正常，但我想知道爲什麼（圖片）選擇器不顯示我的圖像在頁面上。使用json顯示圖像

這是我的PHP文件，它從mysql數據庫中提取所有與選定標記相關的圖像。

<?php 
    $dbhost = '127.0.0.1'; 
    $dbuser = 'root'; 
    $dbpass = ''; 
    $dbname = 'maalem'; 


    $sql2 = "SELECT img FROM image WHERE L_ID=:id"; 
    try { 
     $con = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
     $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
     $con->query('SET NAMES utf8'); 
     $stmt = $con->prepare($sql2); 
     $stmt->bindParam("id", $_GET["L_ID"]); 
     $stmt->execute(); 
     $img = $stmt->fetchAll(PDO::FETCH_OBJ); 
     $con = null; 
     echo '{"pics":'. json_encode($img) .'}'; 
     } catch(PDOException $e) { 
     echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    } 
    ?> 

//this is the javascript file 



    $('#detailsPage').live('pageshow', function (event) { 
    var id = getUrlVars()["L_ID"]; 
    $.getJSON(serviceURL + 'getmarker.php?L_ID=' + id, displayimg); 
    }); 


    function displayimg(data) { 
    var imgs = data.pics; 
    console.log(imgs); 
    $('#pic').append('<img src="' + imgs.img + '"width=160 height=160/>'); 

    $('#actionList').listview('refresh'); 

    } 


    function getUrlVars() { 
    var vars = [], 
    hash; 
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    for (var i = 0; i < hashes.length; i++) { 
     hash = hashes[i].split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 
    return vars; 
    } 

//HTML file 

    <!DOCTYPE HTML> 
    <html> 
    <head> 
    </head> 

    <body> 

     <div id="detailsPage" data-role="page" data-add-back-btn="true"> 

      <div data-role="header"> 
       <h1 id="Name"></h1> 
      </div> 

      <div data-role="content"> 


       <div id="markerDetails"> 
        <h2> الوصف </h2> 
        <p id="Dec"></p> 
        <div id="pic"></div> 
       </div> 



      </div> 

     </div> 

    </body>

來源

2017-02-12 RAB

問題是<img id="pic"/>您已經定義了一個img id爲pic 並在這一行$('#pic').text('<img src="' + imgs.img + '"width=160 height=160/>');你試圖通過pic獲得元素和插入文本，這是不正確。

<div id="pic"></div>這將做的工作對你來說，插入的img標籤裏這個div usinf innerHTML（JavaScript的）或.html()（jQuery的）

來源

2017-02-12 18:40:20

即使我改變它，imgs.img用不了對象（SRC）在瀏覽器@MohdAsimSuhail – RAB

'console.log（imgs）;''imgs'變量是一個數組，你應該迭代'imgs'數組來追加div。 '對於（var j = 0; j '）;}' –

shokran，它的工作 – RAB

使用json顯示圖像

回答

相關問題