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

Home

Web Front-end

HTML Tutorial

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

PHPz

Aug 31, 2023 am 11:41 AM

javascriptjsonimage url

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)

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  src="/static/imghwm/default1.png"  data-src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"  class="lazy"  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></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!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete