vue图片不存在时加载默认图片
在文件中的img那里添加:οnerrοr="errorImg01",然后设置errorImg01的路径如果直接写成
errorImg01: ('../../assets/images/item_image.png'),会找不到这个图片
由于项目启动后, 图片的路径并不是我们写的路径了。所以我们用
errorImg01: 'this.src="' + require('../../assets/images/item_image.png') + '"'这个来请求图片。
<template>
<div class="goods_img">
<img :src="item.PicUrl" alt="" :onerror="errorImg01">
</div>
</template> <script> export default {
name: "ListItems",
data () {
return {
errorImg01: 'this.src="' + require('../../assets/images/item_image.png') + '"'
}
}
}
</script>
--------------------- 
作者:祗想安靜地。 
来源:CSDN 
原文:https://blog.csdn.net/jingjingshizhu/article/details/81315841 
版权声明:本文为博主原创文章,转载请附上博文链接!
vue图片不存在时加载默认图片的更多相关文章
- js-页面需展示大量图片时,采用lyz.delayLoading.min.js,图片在屏幕时加载显示
		
本文本内容拷贝至:https://blog.csdn.net/xuanwuziyou/article/details/48199123 当一个网页中有大量图片时,浏览器会逐个去下载这些图片,等全部下载 ...
 - 加载默认图片,如何避免img标签陷入onerror事件死循环
		
当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环. 为了避免死循环的情况,我们可以在执行完onerror事件 ...
 - Vue.js项目中,当图片无法显示时则显示默认图片
		
使用require将图片进入,写法如下: data: () => ({logo: 'this.src="' + require('../assets/img.png') + '&quo ...
 - 图片_ _Android有效解决加载大图片时内存溢出的问题 2
		
Android有效解决加载大图片时内存溢出的问题 博客分类: Android Android游戏虚拟机算法JNI 尽量不要使用setImageBitmap或 setImageResource或 Bit ...
 - Android RecyclerView使用 及 滑动时加载图片优化方案
		
1.控制线程数量 + 数据分页加载2.重写onScrollStateChanged方法 这个我们后面再谈,下面先来看看RecyclerView控件的使用及我们为什么选择使用它 RecyclerView ...
 - vue如何动态加载本地图片
		
大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势. 以下正文: 今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章. 通常,我们的一个im ...
 - Android开发中如何解决加载大图片时内存溢出的问题
		
Android开发中如何解决加载大图片时内存溢出的问题 在Android开发过程中,我们经常会遇到加载的图片过大导致内存溢出的问题,其实类似这样的问题已经屡见不鲜了,下面将一些好的解决方案分享给 ...
 - Android ListView只加载当前屏幕内的图片(解决list滑动时加载卡顿)
		
最近在做ListView分页显示,其中包括图片 和文字(先下载解析文字内容,再异步加载图片)发现每次点击下一页后,文字内容加载完毕,马上向下滑动,由于这时后台在用线程池异步下载图片,我每页有20条,也 ...
 - 【Android】首次进入应用时加载引导界面
		
参考文章: [1]http://blog.csdn.net/wsscy2004/article/details/7611529 [2]http://www.androidlearner.net/and ...
 
随机推荐
- java把含小数点的数字字符串转换为int类型
			
String num ="1.00"; int abc =Double.valueOf(num).intValue();//转换为Int类型
 - 【转】ACM-数学总揽
			
转自: http://www.aiuxian.com/article/p-2262657.html 数学也分好几大部分,各种算法也很多,一时不知从哪里开始,算了,具体的后面再说吧,鉴于最近遇到的有关博 ...
 - oracle11g安装补丁升级
			
检查当前数据库CPU和PSU补丁信息 方法一: 登录数据库,检查DBA_REGISTRY_HIST视图. SYS@orcl> select *from dba_registry_history; ...
 - mysql 数据增删改的总结
			
一.在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作,包括 1.使用INSERT实现数据的插入2.UPDATE实现数据的更新3.使用DELETE实现数据的删除4.使用SELEC ...
 - 实验报告二&第四周学习总结
			
一.实验目的: (1) 掌握类的定义,熟悉属性.构造函数.方法的调用,掌握用类作为类型声明变量和方法返回值: (2) 理解类和对象的区别,掌握构造函数的使用,熟悉通过对象名引用实例的方法和属性: (3 ...
 - 【Win32 API】远程工具调用
			
前言 有时候,影城报障需要远程过去重现和处理,如果电脑没有安装远程工具的话,还需要营业员下载和安装,然后将账号密码发送过来,这样一来一回操作繁琐也浪费时间,所以我们可以设想一下这种场景,售票员点击在p ...
 - 2014过去了,正式步入职场了,.net
			
一.第一家公司(北京XXXXXXX) 从2014年7月1号拿到学位证,到7月15号到北京,努力找工作,用了两个多礼拜,终于找到了一个只有三个人的公司,愿意要我,薪资是实习三千,转正四千. 2014年7 ...
 - 三十九、python面向对象一
			
A.python面向对象 1.面向对象基础:面向对象三个特性:封装,继承,多态C# java 只能用面向对象编程Ruby,python 函数+面向对象 函数式编程:def 函数def f1(a): r ...
 - STL标准库-容器-set与map
			
STL标准库-容器-set与multiset C++的set https://www.cnblogs.com/LearningTheLoad/p/7456024.html STL标准库-容器-map和 ...
 - JS获取select被选中的option的值
			
一:JavaScript原生的方法 1:拿到select对象: var myselect=document.getElementById(“test”); 2:拿到选中项的索引:var index=m ...