本教程详细介绍了如何使用 JavaScript 动态加载并显示图片。文章将重点阐述通过操作 `` 标签的 `src` 属性来设置图片源的正确方法，而非误用 `innerHTML`。通过具体的代码示例，读者将学会如何从图片 URL 数组中循环读取并将其赋给 HTML 中的图片元素，从而实现页面图片的灵活管理和展示。
在网页开发中，我们经常需要根据不同的数据或用户交互动态地展示图片。这通常涉及到使用 JavaScript 来操作 HTML 的 <img> 元素。理解如何正确地设置图片源是实现这一功能的关键。
理解 <img> 标签与 src 属性
<img> 标签是 HTML 中用于嵌入图像的元素。它不包含内容，是一个空标签，其显示的内容完全由属性决定。其中，src (source) 属性是其最核心的属性，它指定了图像文件的 URL 或路径。浏览器会根据 src 属性的值去加载并显示对应的图像。
一个常见的误区是尝试通过设置 <img> 元素的 innerHTML 属性来改变图片源。然而，innerHTML 属性用于获取或设置元素的 HTML 内容，而 <img> 标签并没有内部内容来显示图片。因此，任何对 <img> 标签 innerHTML 的操作都无法使其显示图片。正确的方法是直接修改其 src 属性。
立即学习“Java免费学习笔记（深入）”；
HTML 结构准备
为了动态加载图片，我们需要在 HTML 中提供 <img> 元素的占位符。这些占位符可以预先设置一个空的 src 属性，或者一个默认的加载中图片。为了便于 JavaScript 选取和操作，建议为这些 <img> 元素添加一个特定的类名或 ID。
以下是一个包含多个图片占位符的 HTML 结构示例：
<div class="image-gallery">
<img src="" alt="动态图片 1" class="dynamic-image">
<img src="" alt="动态图片 2" class="dynamic-image">
<img src="" alt="动态图片 3" class="dynamic-image">
</div>在这个示例中，我们使用了 dynamic-image 类来标识那些需要被 JavaScript 动态更新的图片元素。alt 属性提供了图片的替代文本，这对于可访问性和 SEO 都非常重要。
JavaScript 实现动态加载
接下来，我们将使用 JavaScript 来定义图片源，并在页面加载完成后将这些图片源赋给相应的 <img> 元素。
步骤一：定义图片源数组
首先，在 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 能够成功地访问到页面上的 <img> 元素，我们需要等待整个 HTML 文档（包括所有图像、脚本等）加载完成。window.addEventListener("load", ...) 是一个常用的方法，它会在所有资源（包括图片）都加载完毕后触发。如果仅需等待 DOM 结构加载完成，可以使用 DOMContentLoaded 事件，但对于图片操作，load 事件通常更安全。
window.addEventListener("load", displayImages);步骤三：遍历数组并更新 src 属性
在 displayImages 函数中，我们将执行以下操作：
- 获取所有带有 dynamic-image 类的 <img> 元素。
- 遍历图片 URL 数组。
- 在循环中，将数组中的每个 URL 赋值给对应 <img> 元素的 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 规则添加到你的 <style> 标签或外部 CSS 文件中，可以使动态加载的图片呈现出更美观、统一的布局。
注意事项
- 图片路径的准确性：确保 imageUrls 数组中的路径是正确的。对于本地图片，路径应相对于 HTML 文件；对于外部图片，需要完整的 URL。
- 图片数量匹配：上述 JavaScript 代码在循环时，会同时检查 imageUrls.length 和 images.length。这意味着如果图片 URL 数量多于 HTML 中的 <img> 元素，多余的 URL 将不会被使用；如果 <img> 元素数量多于 URL，则多余的 <img> 元素将保持其初始的 src 值（通常为空）。根据需求，你可能需要调整逻辑来动态创建 <img> 元素或处理不匹配的情况。
- 性能优化：如果需要加载大量图片，可以考虑实现图片懒加载 (Lazy Loading)，即只有当图片进入用户视口时才加载，以提高页面性能和用户体验。HTML5 原生支持 loading="lazy" 属性，或者可以使用 Intersection Observer API 实现自定义懒加载。
- 错误处理：图片加载失败时，浏览器会显示一个破损的图片图标。可以通过监听 <img> 元素的 error 事件来处理这种情况，例如显示一个占位符图片或移除该 <img> 元素。
总结
通过本教程，我们学习了如何使用 JavaScript 动态加载图片。核心在于理解并正确使用 <img> 标签的 src 属性来指定图片源，而不是错误地操作 innerHTML。通过组织好 HTML 结构、定义图片 URL 数组，并在 DOM 加载完成后遍历更新 src 属性，我们可以高效地实现页面图片的动态管理和展示。结合适当的 CSS 样式和性能优化策略，可以构建出响应迅速且用户友好的图片展示功能。
