Wie kann ich diesen JavaScript-Code ändern, um die Bild-URL aus einer JSON-Datei abzurufen und in HTML anzuzeigen?-HTML-Tutorial-php.cn

Wie kann ich diesen JavaScript-Code ändern, um die Bild-URL aus einer JSON-Datei abzurufen und in HTML anzuzeigen?

PHPz

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

nach vorne

818 Leute haben es durchsucht

Wie kann ich diesen JavaScript-Code ändern, um die Bild-URL aus einer JSON-Datei abzurufen und in HTML anzuzeigen?

Dies kann mithilfe der JavaScript-Methode JSON.parse() erfolgen, um die JSON-Datei zu analysieren und die URL des gewünschten Bildes zu extrahieren. Anschließend können Sie ein HTML-img-Tag erstellen und das Quellattribut auf diese URL festlegen. Schließlich können Sie dieses img-Tag an ein vorhandenes HTML-Element anhängen, um es auf Ihrer Seite anzuzeigen.

Dies erfordert einige Grundkenntnisse der JavaScript-Syntax und Vertrautheit mit der Struktur und dem Parsing von JSON. Mit diesen Fähigkeiten ausgestattet, sollten Sie keine Probleme haben, Ihren Code zu ändern, um Ihre Ziele zu erreichen!

Lassen Sie uns in diesen Artikel eintauchen, um besser zu verstehen, wie Sie den JavaScript-Code ändern, um die Bild-URL aus einer Json-Datei abzurufen und sie in HTML anzuzeigen.

Verwenden Sie JSON.parse()

Statische Methode JSON.parse() Erstellen Sie einen JavaScript-Wert oder ein JavaScript-Objekt, indem Sie einen JSON-String analysieren. Mit der optionalen Reviver-Funktion können Transformationen angewendet werden, bevor das Ergebnisobjekt zurückgegeben wird.

Grammatik

Das Folgende ist die Syntax von JSON.parse() -

JSON.parse(text)
JSON.parse(text, reviver)

Nach dem Login kopieren

Beispiel

Betrachten Sie das folgende Beispiel, in dem wir JSON.parse() verwenden, das Skript ausführen und das Bild anzeigen.

<!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>

Nach dem Login kopieren

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe bestehend aus einem Bild, das mit JSON.parse() auf der Webseite angezeigt wird.

Beispiel

Führen Sie das folgende Skript aus und beobachten Sie, wie wir JSON.parse() verwenden, um das Bild auf der Webseite anzuzeigen.

<!DOCTYPE html>
<html>
   <body>
      <button id="button" >click</button>
      <img  id="tutorial" alt="Wie kann ich diesen JavaScript-Code ändern, um die Bild-URL aus einer JSON-Datei abzurufen und in HTML anzuzeigen?" >
      <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>

Nach dem Login kopieren

Wenn Sie das obige Skript ausführen, wird ein Ausgabefenster mit der Klickschaltfläche auf der Webseite angezeigt. Wenn der Benutzer auf die Schaltfläche klickt, wird das Ereignis ausgelöst und das Bild auf der Webseite angezeigt.

Beispiel

Im folgenden Beispiel führen wir das Skript aus, rufen die Bild-URL ab und zeigen sie auf der Webseite an.

<!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>

Nach dem Login kopieren

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die aus einem Bild besteht, das auf der Webseite angezeigt wird.

Das obige ist der detaillierte Inhalt vonWie kann ich diesen JavaScript-Code ändern, um die Bild-URL aus einer JSON-Datei abzurufen und in HTML anzuzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!