Heim >Web-Frontend >HTML-Tutorial >Wie kann ich diesen JavaScript-Code ändern, um die Bild-URL aus einer JSON-Datei abzurufen und in HTML anzuzeigen?
Wie kann ich diesen JavaScript-Code ändern, um die Bild-URL aus einer JSON-Datei abzurufen und in HTML anzuzeigen?
- PHPznach vorne
- 2023-08-31 11:41:09900Durchsuche
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)
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>
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>
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>
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!