Home > Article > Web Front-end > How can I modify this JavaScript code to get the image URL from a JSON file and display it in HTML?
How can I modify this JavaScript code to get the image URL from a JSON file and display it in HTML?
- PHPzforward
- 2023-08-31 11:41:09796browse
This can be done by using the JavaScript method JSON.parse() to parse the JSON file and extract the URL of the desired image. You can then create an HTML img tag and set the source attribute to that URL. Finally, you can append this img tag to an existing HTML element to display it on your page.
This requires some basic knowledge of JavaScript syntax and familiarity with the structure and parsing of JSON. Armed with these skills, you should have no trouble modifying your code to achieve your goals!
Let’s dive into this article to better understand how to modify the JavaScript code to get the image URL from a Json file and display it in HTML.
Use JSON.parse()
Static methods JSON.parse() Creates a JavaScript value or object by parsing a JSON string. The optional reviver function can be used to apply transformations before returning the result object.
grammar
The following is the syntax of JSON.parse() -
JSON.parse(text) JSON.parse(text, reviver)
Example
Consider the following example where we use JSON.parse(), run the script and display the image.
<!DOCTYPE html>
<html>
<body>
<div id="tutorial"></div>
<script>
json_data = '{"icon_url": "https://www.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>
When the script is executed, it will generate an output consisting of an image, which is displayed on the web page by using JSON.parse().
Example
Execute the script below and observe how we use JSON.parse() to get the image displayed on the web page.
<!DOCTYPE html>
<html>
<body>
<button id="button" >click</button>
<img id="tutorial" alt="How can I modify this JavaScript code to get the image URL from a JSON file and display it in HTML?" >
<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://www.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>
When running the above script, the output window will pop up and the click button will be displayed on the web page. When the user clicks the button, the event is triggered and the image is displayed on the web page.
Example
In the example below, we run the script, get the image URL, and display it on the web page.
<!DOCTYPE html>
<html>
<body>
<div id="tutorial"></div>
<script>
var data = {
"images": [{
"image1": "https://www.tutorialspoint.com/images/logo.png"
}, {
"image1": "https://www.tutorialspoint.com/static/images/logo-color.png"
}, {
"image1": "https://www.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>
When the script is executed, it will generate an output consisting of an image that is displayed on the web page.
The above is the detailed content of How can I modify this JavaScript code to get the image URL from a JSON file and display it in HTML?. For more information, please follow other related articles on the PHP Chinese website!