使用 JavaScript 显示图像

使用 JavaScript 显示图像时，可以更新现有 HTML <img> 元素的 src，也可以创建图像元素并将其添加到页面中。若要原位替换图像，请采用前一种方式；若要向图库或其他容器添加图像，则创建新元素即可。无论采用哪种方式，JavaScript 修改的都是页面 DOM，图像资源则由浏览器根据其来源加载。

更改现有图像的来源

先在 HTML 中放置一个图像，并为它设置 ID。点击按钮时，可以更新它的 src 属性。下面这个完整的浏览器页面示例要求 image1.jpg 和 image2.jpg 位于所示路径下，并且这些路径是相对于页面解析的：

本节中的代码以及显示的标签或输出仍为英文。

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Change an image</title>
  <img id="photo" src="image1.jpg" alt="A view of the coast">
  <button id="change">Show the second photo</button>
  <script>
    const photo = document.querySelector("#photo");
    document.querySelector("#change").addEventListener("click", () => {
      photo.src = "image2.jpg";
      photo.alt = "A view of the mountains";
    });
  </script>
</html>

更改 src 会让浏览器加载新资源；它不会替换或重新加载整个页面。如果新图像表达的含义不同，也要更新 alt。如果图像仅用于装饰，且相邻文字已经传达了相同信息，请将 alt 设为空值，不要重复这些文字。

创建并添加新的图像元素

使用 document.createElement("img") 创建 <img> 元素，设置其来源和替代文本，然后将它添加到应该显示图像的容器中。下面这个静态浏览器页面示例使用了可重复调用的辅助函数，每次按下按钮都会添加一张图像。示例要求 images/sunset.jpg 能从页面所在位置解析到。

本节中的代码以及显示的标签或输出仍为英文。

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Add an image</title>
  <button id="add">Add photo</button>
  <div id="gallery"></div>
  <script>
    function addImage(source, description, container) {
      const image = document.createElement("img");
      image.src = source;
      image.alt = description;
      container.appendChild(image);
    }

    const gallery = document.querySelector("#gallery");
    document.querySelector("#add").addEventListener("click", () => {
      addImage("images/sunset.jpg", "Sunset over the water", gallery);
    });
  </script>
</html>

width 和 height 都是可选项。如果明确的显示尺寸有助于预留布局空间，可以设置它们；也可以使用 CSS 设置图像样式。图像的宽度属性以 CSS 像素为单位。对于响应式布局，可以使用 max-width: 100%; height: auto 等 CSS，让图像保持比例并适应容器宽度。

运行这个 JavaScript 示例，可以查看已知选项如何对应到图像路径。它只演示来源选择这一步；上面的浏览器页面示例展示了 DOM 操作。

const imagePaths = {
  coast: "images/coast.jpg",
  mountain: "images/mountain.jpg"
};
const selectedImage = imagePaths.coast;
console.log(selectedImage);

根据用户输入显示图像

对于下拉菜单，应将每个选项的值设为已知的图像路径或 URL。读取用户选中的值，然后更新现有图像。这个浏览器页面示例要求 images/ 目录下的两个文件都能从页面所在位置解析到：

本节中的代码以及显示的标签或输出仍为英文。

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Select an image</title>
  <label for="image-choice">Choose a scene:</label>
  <select id="image-choice">
    <option value="images/coast.jpg">Coast</option>
    <option value="images/mountain.jpg">Mountain</option>
  </select>
  <img id="preview" src="images/coast.jpg" alt="Coastal scene">
  <script>
    const choices = document.querySelector("#image-choice");
    const preview = document.querySelector("#preview");
    const descriptions = {
      "images/coast.jpg": "Coastal scene",
      "images/mountain.jpg": "Mountain scene"
    };

    choices.addEventListener("change", () => {
      preview.src = choices.value;
      preview.alt = descriptions[choices.value];
    });
  </script>
</html>

选项值由页面预先设定，因此用户只能选择你提供的来源。如果这些值来自其他来源，应先根据允许列表验证，再将其赋给图像。对于文件上传，应使用文件输入控件，并根据选中的 File 创建临时对象 URL；不再需要该 URL 时应将其释放。用户输入的本地文件路径通常不是网页可以直接读取的 URL。

处理路径、加载问题与可访问性

<img> 是 HTML 元素，不是 JavaScript 标签。JavaScript 使用 document.createElement 创建它对应的 DOM 表示；src 是图像来源属性（也对应 src 属性），不是方法。路径可以是相对路径或绝对路径。相对路径根据文档 URL 解析，而文档 URL 可能与脚本文件所在目录不同。以 / 开头的根相对路径从网站根目录开始；绝对 URL 则包含协议和主机名。

如果图像没有显示，请在浏览器开发者工具中检查元素当前的 src，并直接打开该 URL。检查拼写、大小写、页面 URL、部署目录、服务器响应，以及网络或控制台消息。图像请求失败时，通常会显示损坏的图像并出现网络错误；这与 JavaScript 异常不同，例如在元素尚不存在时查询它。可以将脚本放在相关标记之后，或等待 DOM 就绪后再查询元素。load 和 error 事件也有助于判断浏览器是否已获取并解码图像。

编写简洁的 alt 文本，描述图像中有用的信息，而不是文件名或路径。通常可以将普通跨源图像的 URL 设为 src 来显示图像；涉及受限操作时才需要关注 CORS 权限，例如通过 canvas 读取跨源图像像素。特定资源能否加载，仍取决于远程服务器和浏览器策略。

常见问题

1. 如何使用 JavaScript 更改图像？ 选中现有的 <img> 元素，并为 src 赋予新值。图像含义改变时，也要更新 alt。
2. JavaScript 可以添加多张图像吗？ 可以。为每个来源创建一个 <img>，再将它们逐一添加到图库或其他容器中。如果来源已存放在数组中，可以使用循环。
3. 如何让用户选择要显示的图像？ 在下拉菜单或其他控件的 change 事件中读取其值，并将预览图像的 src 设为允许使用的来源。
4. 可以使用外部图像 URL 吗？ 可以，前提是该 URL 可访问，且服务器允许浏览器请求。单纯显示图像通常不需要 CORS 访问权限；通过 canvas 读取图像像素则受到额外的跨源限制。
5. 为什么图像没有显示？ 确认解析后的 URL 和文件名，然后检查浏览器的 Network 与 Console 面板，查看请求是否失败或脚本是否报错。还要确认文件已部署在该 URL 指向的位置。