使用 JavaScript 创建图像元素

作者

使用 JavaScript 创建图像元素

Create an Image Element using JavaScript

要创建图像元素：

  1. 使用document.createElement()方法创建img元素。
  2. 使用setAttribute()方法src在元素上设置属性。
  3. 使用 方法将元素添加到页面appendChild()。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box"></div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const image = document.createElement('img');

// 👇️ Local image
// image.setAttribute('src', 'my-img.png');

// 👇️ Remote image
image.setAttribute(
  'src',
  'http://bobbyhadz.com/images/blog/javascript-show-div-on-select-option/banner.webp',
);

image.setAttribute('alt', 'nature');

image.setAttribute('height', 350); // 👈️ height in px
image.setAttribute('width', 550); // 👈️ width in px

// 👇️ optionally style the image
image.style.border = '5px solid yellow';

image.onerror = function handleError() {
  console.log('Image could not be loaded');
  // 👇️ Can set image.src to a backup image here
  // image.src = 'backup-image.png'

  // 👇️ Or hide image
  // image.style.display = 'none';
};

image.onload = function handleImageLoaded() {
  console.log('image loaded successfully');
};

const box = document.getElementById('box');
box.appendChild(image);

我们使用
document.createElement
方法来创建
img 元素。

我们传递给该方法的唯一参数是要创建的元素的类型（img在示例中）。

该createElement方法返回新创建的元素。

我们使用
setAttribute
方法在img元素上设置多个属性。

该setAttribute方法有两个参数：

  1. name– 要设置其值的属性的名称。
  2. value– 分配给属性的值。
如果该属性已存在于元素上，则更新该值，否则添加具有指定名称和值的新属性。

我们src在示例中将属性设置为远程图像，但这也可以是本地文件系统上的图像。

我们设置图像的alt,height和width属性。

该alt属性定义图像的替代文本描述。它主要用于屏幕阅读器。

和属性可以设置为一个数字（没有单位）并表示图像的宽度和高度（以像素为单位）width。height

您还可以style在元素的对象上设置这些属性。

索引.js
const image = document.createElement('img');

// 👇️ Remote image
image.setAttribute(
  'src',
  'http://bobbyhadz.com/images/blog/javascript-show-div-on-select-option/banner.webp',
);

image.setAttribute('alt', 'nature');

image.style.border = '5px solid yellow';
image.style.height = '350px';
image.style.width = '550px';

我们
在元素上添加了onload
事件处理程序。img

当图像加载成功时会触发该load事件。

您还可以在元素上添加
onerror
事件。当图像加载失败时会触发该事件。

如果图像加载失败，您可以使用该onerror事件显示默认图像或隐藏元素。

注意 – 如果您不需要在脚本加载/加载失败时调用函数，则不必添加这些事件处理程序。

img根据您的用例，您可能需要在元素上设置许多其他属性。这是来自
MDN img 文档的完整列表。

如果我在浏览器中加载文章中的示例，我可以看到图像已创建并成功显示。

镜像创建成功

–

发表评论