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

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 ?

PHPz

Libérer： 2023-08-31 11:41:09

avant

819 Les gens l'ont consulté

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

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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 ?

Utilisez JSON.parse()

Grammaire

Exemple

Exemple

Exemple