vue项目中，图片无法显示时或者访问图片出现404时，显示默认图片，但默认图片路径出错

问题描述

在vue项目中，同样的图片，设置在img的src中能正常显示 
设置在img的onerror中不能正常显示

原因

项目启动后， 图片的路径并不是我们写的路径了。

示例： 
源代码：

// 直接加载
<img src="../../assets/img/timg.jpg">
// 设置为logo.png加载失败后显示的默认图片
<img src="/logo.png" onerror="this.src=../../assets/img/timg.jpg">

• 1
• 2
• 3
• 4

渲染后，浏览器控制台查看到的 
 

解决方案

<img src="/logo.png" :onerror="defaultImg">

data() {
  return {
    defaultImg: 'this.src="' + require('../../assets/img/timg.jpg') + '"'
  }
}