Vue图片加载错误、图片加载失败的处理

加载一个图片pic，会在代码里做一个检验图片是否存在，通常会像下面这样写

<img :src="pic?pic:'../assets/img/load.png'" alt="">

这个判断只能判断pic是否存在，只有pic=''"的情况下，才会显示设置的默认图片，但是如果pic这个字段是有值的呢，并且是一个错误的值，或者一个找不到的404的路径呢？这个时候就要用onerror来检测图片加载错误，加载失败了

刚开始试了两种方法，都没有成功，

失败方法一：传送门:http://blog.csdn.net/qq_32786873/article/details/53483951

失败方法二：传送门:http://www.zhihu.com/question/27426689

不墨迹直接上方法，（在data里面先定义好失败的图片路径）

注意的几个点，我第一次写的就入坑了

1. onerror前面要用冒号 :

2. 注意看logo定义的格式，符号不要写错了

<!--template-->
<img :src="pic?pic:'../../assets/placeholder.png'" :onerror="errorImage" alt=""><!--script-->
<script>
export default {data() {return {errorImage: 'this.src="' + require('../assets/error.png') + '"'  ,}},
}
</script>

Vue图片加载错误、图片加载失败的处理相关推荐

android xml 加载错误提示,加载uixml文件失败打开wps时显示“加载XML文件失败１
打开wps时显示"加载XML文件失败." 打开wps时显示"加载XML文件失败1 关闭所有打开的Word文档: 开始 → 运行 → 粘贴上面复制的命令 → 确定. 在打开 ...
php图片地址参数错误,图片上传时一直显示请求地址错误怎么办
1.出现"请求地址错误"的直接原因:图中$action = null 2.根本原因:url美化那一节课程,去掉 index.php的.htaccess 文件修改的时候,没有按照老师 ...
vue 加载image图片不显示解决
vue 加载image图片不显示解决------------写了个vue的demo(自己做一个表格,可以横向增加列也可以纵向增加行)想给demo加图片怎么都出不来,,,,,查图片太大?加载位置不对?配 ...
html5 循环加载图片,解决vue的 v-for 循环中图片加载路径问题
先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...
img 图片加载错误时显示默认图片
有时我们项目里的图片加载错误时(比如 404),为了友好体验,我们可以用一张默认图片来替代. 方法一:用 background 遮住原图片 <img src="no-such-pic. ...
不需要任何依赖的图片加载错误处理的工具类load-image.js
需求的诞生: 先简单介绍一下业务场景,我们的项目是一个微博舆情分析系统,可以根据用户设置的关键字监测相关微博舆情,并进行实时推送.监测范围涵盖境内和境外微博平台(境内:新浪.腾讯,境外:twitter ...
vue中使用lazyload实现图片懒加载
原理:先将img标签的src链接设为同一张图片(比如空白图片),然后给img标签设置自定义属性(比如 data-src),然后将真正的图片地址存储在data-src中,当JS监听到该图片元素进入可视窗 ...
Vue 加载 SVG 图片文件
Vue 加载 SVG 图片文件 /svg/icons.js export default {// LOGOlogo: require('./logo.svg'),logo_content: requi ...
vue的v-for循环中图片加载路径问题
vue的v-for循环中图片加载路径问题产品要求要求图片和它的名字一一对应, vue中的img的src可以动态绑定到一个变量上 <template> <div><ul ...

Vue图片加载错误、图片加载失败的处理

Vue图片加载错误、图片加载失败的处理相关推荐

最新文章

热门文章