如何使用JavaScript将input选中的文件设置为img标签的src属性

报错原因 #

浏览器出于用户隐私安全限制，input[type=file]的value属性仅返回带C:\fakepath\前缀的虚拟路径，并非真实可访问的文件资源地址，浏览器无法识别该路径的协议规则，因此抛出ERR_UNKNOWN_URL_SCHEME错误。
同时你原有逻辑存在交互缺陷：点击图片时直接读取文件选择框的value，此时还未触发文件选择操作，也无法拿到最新选中的文件内容。

修复方案 #

调整交互逻辑：点击图片时主动唤起文件选择窗口，监听文件选择完成事件后，通过选中的文件对象生成合法的资源地址赋值给img标签。
下面是完整可运行的代码：

HTML 代码 #

<img src="" id="userImage" alt="预览图" style="cursor: pointer; width: 200px; height: 200px;">
<input type="file" id="imageInput" accept="image/*" style="display: none;">

这里将文件选择框设为隐藏，仅通过点击图片唤起，符合常规交互逻辑，accept="image/*"限制仅能选择图片类文件

JS 代码 #

// 点击图片唤起文件选择窗口
document.getElementById('userImage').addEventListener('click', function() {
  document.getElementById('imageInput').click()
})

// 监听文件选择完成事件，更新图片预览
document.getElementById('imageInput').addEventListener('change', function(e) {
  // 取第一个选中的文件
  const selectFile = e.target.files[0]
  if (!selectFile) return

  // 方案1：使用URL.createObjectURL 生成临时Blob链接（性能更高，适合仅当前页预览场景）
  const previewUrl = URL.createObjectURL(selectFile)
  document.getElementById('userImage').src = previewUrl

  // 可选：图片加载完成后释放临时链接内存，避免内存占用
  // document.getElementById('userImage').onload = function() {
  //   URL.revokeObjectURL(previewUrl)
  // }

  /* 方案2：使用FileReader转Base64（兼容性更好，适合需要持久化存储、上传图片的场景）
  const reader = new FileReader()
  reader.onload = function() {
    document.getElementById('userImage').src = reader.result
  }
  reader.readAsDataURL(selectFile)
  */
})

两种方案的差异说明 #

• URL.createObjectURL：生成临时的Blob格式链接，生命周期和当前文档绑定，处理大图片时性能远高于转Base64，不需要时建议主动调用revokeObjectURL释放内存。
• FileReader转Base64：生成的是Base64格式字符串，可以直接存入本地存储、提交到服务端，不需要依赖临时链接，但大图片转换后字符串体积会比原文件大1/3左右，性能相对较低。

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