How can I use the json script on my html in the <script> tag and populate the data in the <img src=???/>

Question

How can I use the json script on my html in the <script> tag and populate the data in the <img src=???/>

217 views Asked by Yogev Batito At 09 February 2021 at 14:25

how to reach the JSON below and populate the img tag's src? I was trying to reach it by using the regular method using the dot syntax but it won't work:

data.images[0].image

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Slider</title>
  </head>
  <body>
    <div class="sliderContainer">
      <img src="data.images[0].image" placeholder="example" />
    </div>
    <script type="text/javascript" src="./index.js">
      const data = {
        images: [
          { ID: 0, name: 'name1', image: 'images/example1.jpg', link:'#' },
          { ID: 1, name: 'name2', image: 'images/example2.jpg', link:'#' },
        ],
      };
    </script>
  </body>
</html>

Original Q&A

There are 4 answers

**Gurami Nikolaishvili** · Answer 1 · 2021-02-09 16:58:40

Gurami Nikolaishvili On 09 February 2021 at 16:58

select image element by id

let img = document.getElementById('image id here');

and then

img.src = data.images[0].image;

**Yogeshwaran** · Answer 2 · 2021-02-09 14:33:29

Yogeshwaran On 09 February 2021 at 14:33

You can try this

document.getElementByTagName('img').src = "images/example1.jpg";

if you want to use javascript variable in HTML you can use Vue.js

**mohammad Abbaszadegan** · Answer 3 · 2021-02-09 14:36:28

you can use the jquery selector for set the image src like this

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Slider</title>
      </head>
      <body onload="init">
        <div class="sliderContainer">
          <img src="data.images[0].image" placeholder="example"  id="myimg" />
        </div>
        <script type="text/javascript" src="./index.js">
          const data = {
            images: [
              { ID: 0, name: 'name1', image: 'images/example1.jpg', link:'#' },
              { ID: 1, name: 'name2', image: 'images/example2.jpg', link:'#' },
            ],
          };


function init(){
$("#myimg").attr("src",data.images[0].image);
}
        </script>
      </body>
    </html>

**Cedric Ipkiss** · Answer 4 · 2021-02-09 14:38:34

You're trying to run JavaScript code within an HTML attribute value, which won't work. You need to set the image's src attribute within the JavaScript code in the <script></script> tags

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Slider</title>
      </head>
      <body>
        <div class="sliderContainer">
          <img src="" alt="example" />
        </div>
        <script type="text/javascript">
          const data = {
            images: [
              { ID: 0, name: 'name1', image: 'https://cdn.pixabay.com/photo/2020/07/06/09/37/green-5376289__340.jpg', link:'#' },
              { ID: 1, name: 'name2', image: 'https://cdn.pixabay.com/photo/2020/07/06/09/37/green-5376289__340.jpg', link:'#' },
            ],
          };
          document.getElementsByTagName('img')[0].setAttribute('src', data.images[0].image);
        </script>
      </body>
    </html>

TechQA.

How can I use the json script on my html in the <script> tag and populate the data in the <img src=???/>

There are 4 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in IMAGE

Related Questions in VANILLA-FORUMS

Popular Questions

Popular Tags

Trending Questions