vue项目中,图片无法显示时,显示默认图片,但默认图片路径出错


问题描述

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

原因

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

示例:
源代码:

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

渲染后,浏览器控制台查看到的
这里写图片描述
这里写图片描述

解决方案

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

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM