Maison >interface Web >tutoriel HTML >Comment puis-je modifier ce code JavaScript pour récupérer l'URL de l'image à partir d'un fichier JSON et l'afficher en HTML ?
Comment puis-je modifier ce code JavaScript pour récupérer l'URL de l'image à partir d'un fichier JSON et l'afficher en HTML ?
- PHPzavant
- 2023-08-31 11:41:09900parcourir
Cela peut être fait en utilisant la méthode JavaScript JSON.parse() pour analyser le fichier JSON et extraire l'URL de l'image souhaitée. Vous pouvez ensuite créer une balise HTML img et définir l'attribut source sur cette URL. Enfin, vous pouvez ajouter cette balise img à un élément HTML existant pour l'afficher sur votre page.
Cela nécessite des connaissances de base de la syntaxe JavaScript et une familiarité avec la structure et l'analyse de JSON. Armé de ces compétences, vous ne devriez avoir aucun mal à modifier votre code pour atteindre vos objectifs !
Plongeons dans cet article pour mieux comprendre comment modifier le code JavaScript pour obtenir l'URL de l'image à partir d'un fichier Json et l'afficher en HTML.
Utilisez JSON.parse()
Méthode statique JSON.parse() Créez une valeur ou un objet JavaScript en analysant une chaîne JSON. La fonction facultative Reviver peut être utilisée pour appliquer des transformations avant de renvoyer l'objet résultat.
Grammaire
Voici la syntaxe de JSON.parse() -
JSON.parse(text) JSON.parse(text, reviver)
Exemple
Considérez l'exemple suivant où nous utilisons JSON.parse(), exécutons le script et affichons l'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>
Lorsque le script est exécuté, il génère une sortie composée d'une image, qui est affichée sur la page Web à l'aide de JSON.parse().
Exemple
Exécutez le script ci-dessous et observez comment nous utilisons JSON.parse() pour afficher l'image sur la page Web.
<!DOCTYPE html>
<html>
<body>
<button id="button" >click</button>
<img id="tutorial" alt="Comment puis-je modifier ce code JavaScript pour récupérer l'URL de l'image à partir d'un fichier JSON et l'afficher en 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>
Lors de l'exécution du script ci-dessus, une fenêtre de sortie apparaîtra affichant le bouton de clic sur la page Web. Lorsque l'utilisateur clique sur le bouton, l'événement est déclenché et l'image s'affiche sur la page Web.
Exemple
Dans l'exemple ci-dessous, nous exécutons le script, obtenons l'URL de l'image et l'affichons sur la page Web.
<!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>
Lorsque le script est exécuté, il générera une sortie composée d'une image qui s'affichera sur la page Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!