如何在 <script> 标记中的 html 上使用 json 脚本并在 <img src=???/> 中填充数据
Posted
技术标签:
【中文标题】如何在 <script> 标记中的 html 上使用 json 脚本并在 <img src=???/> 中填充数据【英文标题】：How can I use the json script on my html in the <script> tag and populate the data in the <img src=???/> 【发布时间】：2021-05-13 04:44:50 【问题描述】：如何到达下面的JSON 并填充img 标签的src？
我试图通过使用点语法的常规方法来达到它，但它不起作用：
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>【问题讨论】：
【参考方案1】：您正在尝试在 HTML 属性值中运行 JavaScript 代码，但这是行不通的。你需要在<script></script>标签的JavaScript代码中设置图片的src属性
<!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="" />
</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>【讨论】：
也许添加一个图像有 ID 的部分，并使用它？因为这段代码在实际使用中会失败。只需在标题中添加一个徽标，您必须抵消所有内容+1 最好指出placeholder 不是img 元素上的有效属性【参考方案2】：
你可以试试这个
document.getElementByTagName('img').src = "images/example1.jpg";
如果你想在 HTML 中使用 javascript 变量，你可以使用 Vue.js
【讨论】：
【参考方案3】：你可以像这样使用 jquery 选择器来设置图像 src
<!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>
【讨论】：
这个问题没有提到jQuery，也不是一定要用jQuery。【参考方案4】：根据id选择图片元素
let img = document.getElementById('image id here');
然后
img.src = data.images[0].image;
【讨论】：
以上是关于如何在 <script> 标记中的 html 上使用 json 脚本并在 <img src=???/> 中填充数据的主要内容，如果未能解决你的问题，请参考以下文章
如何在 HTML 标记中排序 <script> 标签与 <style> 标签以获得最佳效果
我应该将 <script> 标签放在 HTML 标记中的啥位置？