加载图片至DOM并添加到div时的错误排查与解决

需求：实现选择本地图片后，将图片显示在class为imagecontainer的div中。

原始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">
    <title>Document</title>
    <script defer src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <label for="profile">请选择您的图片</label>
        <input type="file" name="profile" id="profile">
    </div>
    <div>
        <button>提交</button>
      </div>

      <div class="imagecontainer">
        
      </div>
</body>
</html>

初始JavaScript代码 #

const button = document.querySelector('button')

button.addEventListener('click',()=>{
    const imagecontainer = document.getElementsByClassName('imagecontainer')
    const cardImageInput = document.getElementById('profile')
    const myImage = cardImageInput.value
    cardImageInput.value = ''

    const image = document.createElement('img')
    image.src = myImage
    image.classList.add('profile-image')

    imagecontainer.appendchild(image)
    console.log(imagecontainer)
}) 

问题排查与解决 #

错误1：Uncaught TypeError: imagecontainer.appendchild is not a function #

• 原因：getElementsByClassName返回的是HTMLCollection（元素集合），不是单个DOM节点，无法直接调用节点方法；同时方法名拼写错误，正确写法是appendChild（首字母C大写）。
• 临时修复：将getElementsByClassName('imagecontainer')替换为querySelector('.imagecontainer')，获取单个DOM元素。

错误2：c:\fakepath\FdkmPsOWQAINAt8.png:1 GET c:\fakepath\FdkmPsOWQAINAt8.png net::ERR_UNKNOWN_URL_SCHEME #

• 原因：出于安全机制限制，浏览器会隐藏真实本地文件路径，input.value返回的是带fakepath的虚拟路径，无法直接作为图片src加载。
• 最终解决方案：使用FileReader读取选中的文件，将其转换为Data URL格式，再赋值给图片的src属性。

最终可运行JavaScript代码 #

const button = document.querySelector('button');
const fileInput = document.querySelector("input[type=file]");

button.addEventListener('click',()=>{
    const imagecontainer = document.querySelector('.imagecontainer');
    const image = document.createElement('img');

    var fReader = new FileReader();
    fReader.readAsDataURL(fileInput.files[0]);

    fReader.onloadend = function(event){
        image.src = event.target.result;
        image.classList.add('profile-image');
    }
    
    imagecontainer.appendChild(image);
    console.log(imagecontainer);
});

补充提示：可以在代码中添加文件选择判断，避免未选文件时触发fileInput.files[0]为undefined的错误，例如：

if (!fileInput.files[0]) {
    alert('请先选择图片');
    return;
}

内容的提问来源于stack exchange，提问作者denis kiplangat