使用 JavaScript 顯示影象

Siddharth Swami 2021年10月2日

JavaScript JavaScriptImage

JavaScript 被稱為 Web 開發語言。通過使用 JavaScript，我們可以通過在其中插入影象來使我們的網頁更具吸引力。

預設情況下，我們使用 HTML 中的 <img> 標籤來顯示影象。在 <img> 標籤中，我們有一個稱為 src 的方法，它有助於獲取我們要顯示的影象的來源。在 src 中，我們必須給出影象的完整路徑；否則，它將引發錯誤。還需要指定影象的寬度、高度。

JavaScript 有自己的 img 標籤，它可以幫助我們在網頁中插入圖片。我們可以建立一個可重用的函式。在這裡，我們將再次使用 img 元素，但有所不同。

我們將建立一個名為 display_image() 的函式，該函式將由其中影象的 source、width、height 和 alt 等引數組成。我們將使用 createElement() 在函式中建立一個元素。這樣，我們就可以在呼叫此函式的任何地方動態顯示影象。

例如，

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
function display_image(src, width, height, alt) {
    var a = document.createElement("img");
    a.src = src;
    a.width = width;
    a.height = height;
    a.alt = alt;
    document.body.appendChild(a);
}
display_image('JavaScript.jpg', 
                 276, 
                 110, 
                 'JavaScriptImage');
</script>
</body>
</html>

輸出：

用 javascript 顯示影象

上面的示例根據提供的源在網頁上顯示影象。document.body.appendChild() 函式將給定的元素新增到網頁的正文中。