本地环境下图片src存在但img.onload未触发且onerror触发的问题

我开发了一个自定义图片（文件）上传器，可成功上传并在上传器内预览图片。我需要获取上传图片的宽高，以便在其超出特定尺寸时将其压缩至合适大小。但创建新Image实例后，onload函数未触发，反而触发了onerror函数。

上传的文件数据截图：

相关代码：

console.log(file) //上方输出的内容
let img = new Image()
img.onload = () => console.log('loaded') //未触发
img.onerror = () => console.log('error') //触发
img.complete //返回true
img.src = file.name 
console.log(img.src) //http://localhost:3000/maxresdefault.png

请问为何img.complete返回true的同时onerror会被触发？

原因分析与解决办法 #

核心问题：src赋值错误 #

你给img.src赋值的是file.name，这只是上传文件的文件名，并不是能让浏览器加载到图片的有效地址。浏览器会把它当作当前域名下的相对路径去请求（比如你这里变成了http://localhost:3000/maxresdefault.png），但服务器上根本没有这个文件，所以加载失败触发onerror。

为什么img.complete返回true？ #

Image的complete属性返回true的场景包括：图片加载完成、加载失败、或者图片没有设置src。这里因为你设置的src无效，加载失败后，complete就会变成true，同时触发onerror事件。

正确获取图片宽高的方法 #

要读取本地上传的File对象，得用Blob URL或者FileReader生成可访问的图片地址：

方法一：使用URL.createObjectURL

console.log(file)
let img = new Image()
img.onload = function() {
  console.log('loaded')
  console.log('图片宽高：', this.width, 'x', this.height)
  // 用完释放临时URL资源
  URL.revokeObjectURL(this.src)
}
img.onerror = () => console.log('图片加载失败')
img.src = URL.createObjectURL(file)

方法二：使用FileReader

console.log(file)
const reader = new FileReader()
reader.onload = function(e) {
  let img = new Image()
  img.onload = () => {
    console.log('loaded')
    console.log('图片宽高：', img.width, 'x', img.height)
  }
  img.onerror = () => console.log('图片加载失败')
  img.src = e.target.result
}
reader.readAsDataURL(file)

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