如何修改這段JavaScript程式碼以從JSON檔案中取得圖像URL，並在HTML中顯示它？-html教學-PHP中文網

如何修改這段JavaScript程式碼以從JSON檔案中取得圖像URL，並在HTML中顯示它？

PHPz

發布： 2023-08-31 11:41:09

轉載

819 人瀏覽過

如何修改這段JavaScript程式碼以從JSON檔案中取得圖像URL，並在HTML中顯示它？

這可以透過使用 JavaScript 方法 JSON.parse() 解析 JSON 檔案並提取所需圖像的 URL 來完成。然後，可以建立 HTML img 標籤，並將來源屬性設定為該 URL。最後，可以將此 img 標籤附加到現有 HTML 元素，以便將其顯示在您的頁面上。

這需要一些基本的 JavaScript 語法知識，以及熟悉 JSON 的結構和解析方式。掌握了這些技能，您應該可以毫不費力地修改程式碼來實現您的目標！

讓我們深入研究本文，以便更好地了解如何修改 JavaScript 程式碼以從 Json 檔案中獲取圖像 URL，並以 HTML 形式顯示它。

使用 JSON.parse()

靜態方法 JSON.parse() 透過解析 JSON 字串來建立 JavaScript 值或物件。在傳回結果物件之前，可以使用可選的 reviver 函數套用轉換。

文法

以下是 JSON.parse() 的語法 -

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

登入後複製

範例

考慮以下範例，我們使用 JSON.parse()，執行腳本並顯示圖片。

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

登入後複製

執行腳本時，它將產生一個由映像組成的輸出，該輸出透過使用 JSON.parse() 顯示在網頁上。

範例

執行下面的腳本並觀察我們如何使用JSON.parse()來取得網頁上顯示的圖片。

<!DOCTYPE html>
<html>
   <body>
      <button id="button" >click</button>
      <img  id="tutorial" alt="如何修改這段JavaScript程式碼以從JSON檔案中取得圖像URL，並在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>

登入後複製

執行上述腳本時，將彈出輸出窗口，並在網頁上顯示點擊按鈕。當使用者點擊按鈕時，事件被觸發並在網頁上顯示圖像。

範例

在下面的範例中，我們執行腳本，取得圖像 URL，並將其顯示在網頁上。

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

登入後複製

執行腳本時，它將產生一個由顯示在網頁上的圖像組成的輸出。

以上是如何修改這段JavaScript程式碼以從JSON檔案中取得圖像URL，並在HTML中顯示它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！