数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何修改此 JavaScript 代码以从 JSON 文件中获取图像 URL，并在 HTML 中显示它？
这可以通过使用 JavaScript 方法JSON.parse()来解析 JSON 文件并提取所需图像的 URL 来实现。然后，可以使用源属性设置为此 URL 的 HTML img 标签创建。最后，可以将此 img 标签附加到现有的 HTML 元素以将其显示在页面上。
这需要一些基本的 JavaScript 语法知识，以及熟悉 JSON 在其中的结构和解析方式。掌握这些技能后，您应该能够轻松地修改代码以实现您的目标！
让我们深入了解文章，以便更好地理解如何修改 JavaScript 代码以从 Json 文件中获取图像 URL，并在 HTML 中显示它。
使用 JSON.parse()
静态方法JSON.parse()通过解析 JSON 字符串创建 JavaScript 值或对象。在返回结果对象之前，可以使用可选的 reviver 函数应用转换。
语法
以下是JSON.parse()的语法：
JSON.parse(text) JSON.parse(text, reviver)
示例
考虑以下示例，其中我们使用JSON.parse()，运行脚本并显示图像。
<!DOCTYPE html>
<html>
<body>
<div id="tutorial"></div>
<script>
json_data = '{"icon_url": "https://tutorialspoint.com/images/logo.png"}';
json_data = JSON.parse(json_data);
var getimage = document.createElement("img");
getimage.onload = function() {
document.getElementById("tutorial").appendChild(getimage);
}
getimage.src = json_data.icon_url;
</script>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含通过使用JSON.parse()显示在网页上的图像。
示例
执行以下脚本并观察我们将如何使用JSON.parse()来显示网页上的图像。
<!DOCTYPE html>
<html>
<body>
<button id="button" >click</button>
<img id="tutorial">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("#button").on("click",function(){
var json='{"status":200,"count":1,"data":[{"image":"https://tutorialspoint.com/images/logo.png"}]}';
var obj = jQuery.parseJSON(json);
imagedata = obj.data[0].image;
if (imagedata == ""){
$( "#tutorial" ).attr('src', "imageerror.jpg");
} else {
$( "#tutorial" ).attr('src', imagedata);
}
});
</script>
</body>
</html>
运行上述脚本后，输出窗口将弹出，在网页上显示点击按钮。当用户点击按钮时，事件被触发并在网页上显示图像。
示例
在以下示例中，我们运行脚本，获取图像 URL，并使其出现在网页上。
<!DOCTYPE html>
<html>
<body>
<div id="tutorial"></div>
<script>
var data = {
"images": [{
"image1": "https://tutorialspoint.com/images/logo.png"
}, {
"image1": "https://tutorialspoint.com/static/images/logo-color.png"
}, {
"image1": "https://tutorialspoint.com/html/images/html-mini-logo.jpg"
}, ]
};
data.images.forEach(function(obj) {
var image = new Image();
image.src = obj.image1;
document.getElementById("tutorial").appendChild(image);
})
</script>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含显示在网页上的图像。
更新于: 2023年4月20日
8K+ 次浏览
广告