HTML&JS图片无法显示：创建与上传文件同src的img元素失败求助

嘿，我一眼就看出问题所在了——你在处理文件上传生成图片元素时，用错了createObjectURL()的参数，咱们来一步步修正：

核心问题分析 #

你当前的代码里，document.getElementById("wowo").value拿到的是浏览器为了安全隐藏真实路径后的伪路径字符串（比如C:\fakepath\test.png），而window.URL.createObjectURL()需要的是一个真实的File对象，不是路径字符串。另外你手动截取路径的操作完全没必要，因为浏览器根本不会暴露真实本地路径，截取后的内容也不是有效的资源引用。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<title>HMM...</title>
</head>
<body>
<!-- 可选：添加accept属性限制仅选择图片 -->
<input type="file" id="wowo" accept="image/*">
<div id="dispImg">
</div>
<button onclick="wp()">run</button>
<script>
window.URL = window.URL || window.webkitURL;
function wp() {
  // 从文件控件的files数组中获取选中的File对象
  const selectedFile = document.getElementById("wowo").files[0];
  
  // 先判断用户是否选中了文件
  if (!selectedFile) {
    alert("请先选择一张图片哦！");
    return;
  }

  const crimg = document.createElement("img");
  // 直接传入File对象生成Blob URL
  crimg.src = window.URL.createObjectURL(selectedFile);
  crimg.height = 60;
  
  crimg.onload = function() {
    // 图片加载完成后释放URL对象，避免内存泄漏
    window.URL.revokeObjectURL(this.src);
  }

  document.getElementById("dispImg").appendChild(crimg);
}
</script>
</body>
</html>

关键改动说明 #

• 获取正确的File对象：改用files[0]获取用户选中的文件，这是File API的标准用法，能拿到真实的文件对象。
• 添加文件选中校验：避免用户未选文件就点击按钮导致的报错，提升用户体验。
• 移除无效的路径截取：直接用File对象生成Blob URL，这是浏览器能识别的有效资源地址。
• 可选优化：给input添加accept="image/*"，限制用户只能选择图片类型的文件，减少无效操作。

这样修改后，你选中图片点击run按钮，就能正常显示图片啦！

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