檢索JSON文件，該文件是在數據庫和顯示HTML img標籤

Question

我真的不知道到底我錯了圖像。可能很簡單，但我無法弄清楚。任何幫助將是偉大的，請和謝謝。

JSON代碼（它被存儲在 '圖像' 列在數據庫tblproducts表）

{"200x200":"http://img.fkcdn.com/image/mobile/p/s/u/lenovo-k6-power-k33a42-200x200-imaezt6hypjzhdug.jpeg","400x400":"http://img.fkcdn.com/image/mobile/p/s/u/lenovo-k6-power-k33a42-400x400-imaezt6hypjzhdug.jpeg","800x800":"http://img.fkcdn.com/image/mobile/p/s/u/lenovo-k6-power-k33a42-800x800-imaezt6hypjzhdug.jpeg","unknown":"http://img.fkcdn.com/image/mobile/p/s/u/lenovo-k6-power-k33a42-original-imaezt6hypjzhdug.jpeg"} 

HTML & PHP代碼：

<?php 
    $category_id = $_GET['category_id']; 
    $result = mysql_query("select * from tblproducts where category_id = '$category_id"); 
    while($row = mysql_fetch_array($result, MYSQL_ASSOC)){ 
?> 
<script> 
    var data = 
     data.forEach(function(obj) { 
      var img = new Image(); 
      img.src = obj.Img1; 
      img.setAttribute("class", "banner-img"); 
      img.setAttribute("alt", "effy"); 
      document.getElementById("img-container").appendChild(img); 
     }); 
</script> 
    <img id="img-container" alt=" " class="img-responsive" /> 
    <h5> 
     <a target="_blank" href="<?php echo $row['product_url']; ?>"> 
      <?php echo $row['product_title']; ?> 
     </a> 
    </h5> 
    <?php echo $row['maximum_price']; ?> 
<?php } ?> 

我不知道的JavaScript，以及如何想法從json中獲取每個圖像並將其顯示在不同的標籤中。請幫助...在此先感謝

Answer 1

假設你的JSON存儲爲images列字符串。你可以這樣做：

// ... 
<script> 
    var data = <?php echo json_decode($row['images']); ?> 
     Object.keys(data).forEach(function(key) { 
      var img = new Image(); 
      img.src = data[key]; 
      img.setAttribute("class", "banner-img"); 
      img.setAttribute("alt", "effy"); 
      img.classList.add('img-responsive'); 
      document.getElementById("img-container").appendChild(img); 
     }); 
</script> 
    <div id="img-container"></div> 
    <h5> 
     <a target="_blank" href="<?php echo $row['product_url']; ?>"> 
      <?php echo $row['product_title']; ?> 
     </a> 
    </h5> 
// ... 

我改變了圖像附加邏輯，你在做什麼是錯的。您不能以這種方式追加圖像，而是創建一個容器並在該容器中附加新創建的圖像。