How can I modify this JavaScript code to get the image URL from a JSON file and display it in HTML?-HTML Tutorial-php.cn

How can I modify this JavaScript code to get the image URL from a JSON file and display it in HTML?

PHPz

Release： 2023-08-31 11:41:09

forward

819 people have browsed it

How can I modify this JavaScript code to get the image URL from a JSON file and display it in HTML?

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)

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!