vue项目中 img标签加载图片失败，让其显示默认图片

可以通过error事件调用函数显示默认的图片

之前在网上看到的方法是下面这样的

export default {
   data() {
   return {
           defaultImg: require("@/assets/img/img_fail.png"),
   }
   },
   methods: {
       defImg(){
   let img = event.srcElement;
   img.src = this.defaultImg;
   img.onerror = null; //防止闪图
},
   }
}
控制台报错了require is not define的错误

然后修改了下获取默认图片的方法

通过import的方式引入图片

import defaultImg from ./fefault.png

把获取默认图片的方式修改后，在获取图片失败的情况下·可以显示默认的图片了

vue项目中 img标签加载图片失败，让其显示默认图片相关推荐

vue项目中 img标签加载失败方法，onerror事件的两种方法
vue项目中 img标签加载失败方法 ?css 第一种方法第二种方法本人写的第一篇文章,希望对你有帮助第一种方法 < img src="123" :οnerrοr=&q ...
vue项目中 img标签加载失败(404)方法，@error事件
vue项目中 img标签加载失败方法,@error事件 @error="defImg" <img src="123" @error="defIm ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
android动态设置错误页面,Android中替换WebView加载网页失败时的页面
我们用webView去请求一个网页链接的时候,如果请求网页失败或无网络的情况下,它会返回给我们这样一个页面,如下图所示: 上面这个页面就是系统自带的页面,你觉得是不是很丑?反正小编本人觉得非常丑,很难 ...
img标签无图片或者图片url错误时显示默认图片
img标签无图片或者图片url错误时显示默认图片如上图,四个img标签中插入四张图片. 核心:οnerrοr="this.src='默认图片路径' " 当img标签src路径错误 ...
Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue项目中最简单的使用集成百度UEditor方式，含图片上传
前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热度.而不少公司和个人也仍然 ...
qt的项目中单个文件加载样式表
引言编写一个项目后,通过加载样式表来设置项目中的所有控件的样式,我之前习惯的是在main.cpp文件中加载一个样式表,该样式表含有程序中所有控件的样式,也就是整个程序只需要加载一遍样式文件.但是多人 ...
nginx加载图片慢_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...

vue项目中 img标签加载图片失败，让其显示默认图片

vue项目中 img标签加载图片失败，让其显示默认图片相关推荐

最新文章

热门文章