Bagaimanakah saya boleh mengubah suai kod JavaScript ini untuk mendapatkan URL imej daripada fail JSON dan memaparkannya dalam HTML?-html tutorial-php.cn

Bagaimanakah saya boleh mengubah suai kod JavaScript ini untuk mendapatkan URL imej daripada fail JSON dan memaparkannya dalam HTML?

PHPz

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

ke hadapan

818 orang telah melayarinya

Bagaimanakah saya boleh mengubah suai kod JavaScript ini untuk mendapatkan URL imej daripada fail JSON dan memaparkannya dalam HTML?

Ini boleh dilakukan dengan menggunakan kaedah JavaScript JSON.parse() untuk menghuraikan fail JSON dan mengekstrak URL imej yang dikehendaki. Anda kemudian boleh membuat teg img HTML dan menetapkan atribut sumber kepada URL tersebut. Akhir sekali, anda boleh menambahkan teg img ini pada elemen HTML sedia ada untuk memaparkannya pada halaman anda.

Ini memerlukan sedikit pengetahuan asas tentang sintaks JavaScript dan kebiasaan dengan struktur dan penghuraian JSON. Berbekalkan kemahiran ini, anda sepatutnya tidak menghadapi masalah mengubah suai kod anda untuk mencapai matlamat anda!

Mari selami artikel ini untuk lebih memahami cara mengubah suai kod JavaScript untuk mendapatkan URL imej daripada fail Json dan memaparkannya dalam HTML.

Gunakan JSON.parse()

Kaedah statik JSON.parse() Cipta nilai atau objek JavaScript dengan menghuraikan rentetan JSON. Fungsi reviver pilihan boleh digunakan untuk menggunakan transformasi sebelum mengembalikan objek hasil.

Tatabahasa

Berikut ialah sintaks JSON.parse() -

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

Salin selepas log masuk

Contoh

Pertimbangkan contoh berikut di mana kami menggunakan JSON.parse(), jalankan skrip dan paparkan imej.

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

Salin selepas log masuk

Apabila skrip dilaksanakan, ia akan menghasilkan output yang terdiri daripada imej, yang dipaparkan pada halaman web menggunakan JSON.parse().

Contoh

Laksanakan skrip di bawah dan perhatikan cara kami menggunakan JSON.parse() untuk mendapatkan imej dipaparkan pada halaman web.

<!DOCTYPE html>
<html>
   <body>
      <button id="button" >click</button>
      <img  id="tutorial" alt="Bagaimanakah saya boleh mengubah suai kod JavaScript ini untuk mendapatkan URL imej daripada fail JSON dan memaparkannya dalam 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>

Salin selepas log masuk

Apabila menjalankan skrip di atas, tetingkap output akan muncul menunjukkan butang klik pada halaman web. Apabila pengguna mengklik butang, peristiwa itu dicetuskan dan imej dipaparkan pada halaman web.

Contoh

Dalam contoh di bawah, kami menjalankan skrip, mendapatkan URL imej dan memaparkannya pada halaman 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>

Salin selepas log masuk

Apabila skrip dilaksanakan, ia akan menghasilkan output yang terdiri daripada imej yang dipaparkan pada halaman web.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengubah suai kod JavaScript ini untuk mendapatkan URL imej daripada fail JSON dan memaparkannya dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!