Get Image from Json File Using JavaScript and Display in HTML Img Tag

var data = {  "images": [{    "bannerImg1": "http://i.stack.imgur.com/HXS1E.png?s=32&g=1"  },  {"bannerImg1" : "http://i.stack.imgur.com/8ywqe.png?s=32&g=1"  }]};data.images.forEach( function(obj) {  var img = new Image();  img.src = obj.bannerImg1;  img.setAttribute("class", "banner-img");  img.setAttribute("alt", "effy");  document.getElementById("img-container").appendChild(img);});

<div class="banner-section" id="img-container">    </div>

Display Images from JSON Array using JavaScript

You need to set the src property to the image instead of setting its innerHTML.

A normal img tag would look something like this:

<img id="image" src="/path/to/image.png">

You need to replicate the same using JavaScript:

document.querySelector("#picture").innerHTML = `${hotelChoice.picture}`
// Becomes
document.querySelector("#picture").src = `${hotelChoice.picture}`

Also, pay attention to the image path inside the JSON file, it should be relative to the HTML document you're using it, not the JavaScript one. So if your images are stored inside a separate directory you should change the path inside your JSON file accordingly.

Example:
If your HTML file is in the project root and there is an images folder, you JSON should be something like:

{
  "hotels": [
    {
      "name": "Something",
      "address": "Some Street, 12",
      "picture": "images/picture_name.jpg"
    }
  ]
}

Retrieve image from JSON file which is in the database and display in HTML img tag

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.

How can I use a JSON object to an <img> src tag?

You need to bind the attribute like this:

<img class="nav-icon" :src="item.image" />

Edit after comments- It seems you need to use a function to return a dynamic image like you are requesting.

This answer was my reference.
Vue.js dynamic images not working

// template
    <v-img :src="getImgUrl(image_from_json.url)" />
      
    

// data
   image_from_json: {
      url: "/images/img1.jpg",
    },

// methods
    getImgUrl(img) {
      var images = require("../../assets" + img);
      return images;
    },

how to get image from json and display it

function createIMG (data, status) {
  var img = document.createElement('img')
  img.setAttribute("src", data.user_avatar);
  document.body.appendChild(img)
}

//simulate the input:
createIMG({"user_avatar":"/media/mizbanuser/profile_img/2020-10- 27_095908.3275338039170.jpg","status":true}, 'success')

data = {
  "tiles" : [
  {
    "img" : "https://picsum.photos/200/300"
  },
  {
    "img" : "https://picsum.photos/200/300"
  },
  {
    "img" : "https://picsum.photos/200/300"
  }
 ]
};

data.tiles.forEach((item, index) => {
  let img = new Image();
  img.src = item.img;
  tile = document.getElementsByClassName('tile-image' + (index + 1))[0];
  tile.appendChild(img);
});