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 ?-tutoriel HTML-php.cn

Table des matières

Utilisez JSON.parse()

Grammaire

Exemple

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 ?

Aug 31, 2023 am 11:41 AM

javascript json URL de l'image

Comment puis-je modifier ce code JavaScript pour récupérer lURL de limage à partir dun fichier JSON et lafficher en HTML ?

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)

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn