使用 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() 函数将给定的元素添加到网页的正文中。