从JSON文件中检索图像，该文件位于数据库中并以HTML img标记显示

Question

I really dont know where the hell i am wrong. May be it is simple but I can't figure it out. Any help would be great, please and thank you.

JSON code (it is stored in 'images' column in tblproducts table in the database)

{"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 Code:

<?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 } ?>

I have no idea about the javascript and how to fetch each of the image from the json and display it in different tag. Please help... Thanks in advance

Answer 1

Assuming your JSON is stored as string in column images . You can do something like this:

// ...
<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>
// ...

I've changed the image append logic, what you were doing was wrong. You cannot append images that way, instead create a container and append the newly created images in that container.