JavaScript 动态加载图片：正确使用 src 属性显示图像

顺亿

2026-10-03 • 👁 0人浏览过

本教程详细介绍了如何使用 JavaScript 动态加载并显示图片。文章将重点阐述通过操作 ` ` 标签的 `src` 属性来设置图片源的正确方法，而非误用 `innerHTML`。通过具体的代码示例，读者将学会如何从图片 URL 数组中循环读取并将其赋给 HTML 中的图片元素，从而实现页面图片的灵活管理和展示。在网页开发中，我们经常需要根据不同的数据或用户交互动态地展示图片。这通常涉及到使用 JavaScript 来操作 HTML 的元素。理解如何正确地设置图片源是实现这一功能的关键。理解标签与 src 属性标签是 HTML 中用于嵌入图像的元素。它不包含内容，是一个空标签，其显示的内容完全由属性决定。其中，src (source) 属性是其最核心的属性，它指定了图像文件的 URL 或路径。浏览器会根据 src 属性的值去加载并显示对应的图像。一个常见的误区是尝试通过设置元素的 innerHTML 属性来改变图片源。然而，innerHTML 属性用于获取或设置元素的 HTML 内容，而标签并没有内部内容来显示图片。因此，任何对标签 innerHTML 的操作都无法使其显示图片。正确的方法是直接修改其 src 属性。立即学习 “ Java免费学习笔记（深入） ”； HTML 结构准备为了动态加载图片，我们需要在 HTML 中提供元素的占位符。这些占位符可以预先设置一个空的 src 属性，或者一个默认的加载中图片。为了便于 JavaScript 选取和操作，建议为这些元素添加一个特定的类名或 ID。以下是一个包含多个图片占位符的 HTML 结构示例：

在这个示例中，我们使用了 dynamic-image 类来标识那些需要被 JavaScript 动态更新的图片元素。alt 属性提供了图片的替代文本，这对于可访问性和 SEO 都非常重要。 JavaScript 实现动态加载接下来，我们将使用 JavaScript 来定义图片源，并在页面加载完成后将这些图片源赋给相应的元素。 SEO GPT 免费的白帽SEO，PPC和网站经销商平台下载步骤一：定义图片源数组首先，在 JavaScript 中创建一个数组，其中包含所有需要动态加载的图片 URL。这些 URL 可以是相对路径、绝对路径或完整的外部图片链接。

let imageUrls = [
    "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png",
    "https://www.w3schools.com/css/img_5terre.jpg", // 另一个外部图片示例
    "images/local-image.jpg" // 假设存在一个本地图片
];

步骤二：等待 DOM 加载完成为了确保 JavaScript 能够成功地访问到页面上的元素，我们需要等待整个 HTML 文档（包括所有图像、脚本等）加载完成。 win dow.addEventListener("load", ...) 是一个常用的方法，它会在所有资源（包括图片）都加载完毕后触发。如果仅需等待 DOM 结构加载完成，可以使用 DOMContentLoaded 事件，但对于图片操作，load 事件通常更安全。

window.addEventListener("load", displayImages);

步骤三：遍历数组并更新 src 属性在 displayImages 函数中，我们将执行以下操作：获取所有带有 dynamic-image 类的元素。遍历图片 URL 数组。在循环中，将数组中的每个 URL 赋值给对应元素的 src 属性。

function displayImages() {
    // 使用 querySelectorAll 获取所有具有特定类的图片元素
    let images = document.querySelectorAll(".dynamic-image");

    // 遍历图片 URL 数组，并更新对应的图片元素
    // 确保不超出 HTML 中图片元素的数量
    for (let i = 0; i < imageUrls.length && i < images.length; i++) {
        images[i].src = imageUrls[i]; // 正确地设置 src 属性
    }
}

将以上代码片段整合，完整的 JavaScript 代码如下：

let imageUrls = [
    "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png",
    "https://www.w3schools.com/css/img_5terre.jpg",
    "images/local-image.jpg"
];

// 监听窗口的 load 事件，确保 DOM 和所有资源加载完毕
window.addEventListener("load", displayImages);

function displayImages() {
    // 获取所有带有 'dynamic-image' 类的 img 元素
    let images = document.querySelectorAll(".dynamic-image");

    // 遍历图片 URL 数组，并将其赋给对应的 img 元素的 src 属性
    // 循环条件确保不会尝试访问不存在的图片元素或 URL
    for (let i = 0; i < imageUrls.length && i < images.length; i++) {
        images[i].src = imageUrls[i];
    }
}

CSS 样式优化为了更好地控制动态加载图片的显示效果，例如统一图片大小或添加边框，我们可以使用 CSS 进行样式设置。

.dynamic-image {
    width: 200px; /* 设置固定宽度 */
    height: 150px; /* 设置固定高度 */
    object-fit: cover; /* 保持图片比例并裁剪以填充容器 */
    margin: 10px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.image-gallery {
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许图片换行 */
    justify-content: center; /* 水平居中 */
    padding: 20px;
}

将这些 CSS 规则添加到你的