如何在JavaScript图片画廊中自动为选中图片设置img标签的src？

我正在用JavaScript开发图片画廊，点击“Add”按钮会弹出文件选择窗口，同时在容器里生成<img>标签，但不知道怎么把选中图片的src自动填入这个img标签里。之前试过image.src = URL.createObjectURL(image)，没成功。

用户原代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@1&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Gallery</title>
</head>
<body>
    <div class="container">
        <h1>Gallery</h1>
        <button id="addButton">Add</button>
        <div id="containerImage" class="container-image"></div>
    </div>
    <script src="app.js"></script>
</body>
</html>

JavaScript代码 #

let addButton = document.querySelector("#addButton");
let imageContainer = document.querySelector("#containerImage");
addButton.addEventListener('click', function () {
    let input = document.createElement('input');
    input.type = "file";
    input.click();
});
addButton.addEventListener('click',function(){
    let image = document.createElement('img');
    imageContainer.appendChild(image);
    image.className="resim";
});

问题分析与解决方法 #

你的问题核心原因有两个：

• 按钮绑定了两个独立的click事件，导致生成文件输入框和生成img元素的操作完全分离，无法建立关联；
• 之前使用URL.createObjectURL()时参数错误，该方法需要传入选中的文件对象，而非img元素本身。

修改后的代码 #

将所有逻辑合并到同一个click事件中，同时监听文件选择的change事件来完成图片赋值：

let addButton = document.querySelector("#addButton");
let imageContainer = document.querySelector("#containerImage");

addButton.addEventListener('click', function () {
    // 创建文件输入框，限制仅选择图片类型
    let input = document.createElement('input');
    input.type = "file";
    input.accept = "image/*";

    // 创建img元素并添加到容器
    let image = document.createElement('img');
    image.className = "resim";
    imageContainer.appendChild(image);

    // 监听文件选择完成事件
    input.addEventListener('change', function (e) {
        const selectedFile = e.target.files[0];
        if (selectedFile) {
            // 生成临时URL，赋值给img的src
            const tempImageUrl = URL.createObjectURL(selectedFile);
            image.src = tempImageUrl;

            // 图片加载完成后释放临时URL，避免内存泄漏
            image.onload = function() {
                URL.revokeObjectURL(tempImageUrl);
            }
        }
    });

    // 触发文件选择窗口
    input.click();
});

关键说明 #

• input.accept = "image/*"：限制用户只能选择图片文件，提升交互体验；
• URL.createObjectURL(selectedFile)：将本地文件转换为浏览器可识别的临时URL；
• URL.revokeObjectURL(tempImageUrl)：图片加载完成后释放临时URL，防止内存占用过高。

内容的提问来源于stack exchange，提问作者Berk Bıçakcı