データベースにある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 } ?> 

私はジャバスクリプトについては考えているとどのように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> 
// ... 

イメージアペンドロジックを変更しました。あなたがしていたことが間違っていました。そのようにイメージを追加することはできません。代わりにコンテナを作成し、新しく作成したイメージをそのコンテナに追加します。