How can I use the json script on my html in the <script> tag and populate the data in the <img src=???/>
Question
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>
4 answers
solution1
2 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>solution2
0 2021-02-09 14:33:29
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
solution3
0 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>
solution4
0 2021-02-09 16:58:40
select image element by id
let img = document.getElementById('image id here');
and then
img.src = data.images[0].image;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.