在文件中的img那里添加:οnerrοr="errorImg01",然后设置errorImg01的路径如果直接写成

errorImg01: ('../../assets/images/item_image.png'),会找不到这个图片

由于项目启动后, 图片的路径并不是我们写的路径了。所以我们用

errorImg01: 'this.src="' + require('../../assets/images/item_image.png') + '"'这个来请求图片。

  1. <template>
  2. <div class="goods_img">
  3. <img :src="item.PicUrl" alt="" :onerror="errorImg01">
  4. </div>
  5. </template>
  6.  
  7. <script>
  8.  
  9. export default {
  10. name: "ListItems",
  11. data () {
  12. return {
  13. errorImg01: 'this.src="' + require('../../assets/images/item_image.png') + '"'
  14. }
  15. }
  16. }
  17. </script>

---------------------
作者:祗想安靜地。
来源:CSDN
原文:https://blog.csdn.net/jingjingshizhu/article/details/81315841
版权声明:本文为博主原创文章,转载请附上博文链接!

vue图片不存在时加载默认图片的更多相关文章

  1. js-页面需展示大量图片时,采用lyz.delayLoading.min.js,图片在屏幕时加载显示

    本文本内容拷贝至:https://blog.csdn.net/xuanwuziyou/article/details/48199123 当一个网页中有大量图片时,浏览器会逐个去下载这些图片,等全部下载 ...

  2. 加载默认图片,如何避免img标签陷入onerror事件死循环

    当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环. 为了避免死循环的情况,我们可以在执行完onerror事件 ...

  3. Vue.js项目中,当图片无法显示时则显示默认图片

    使用require将图片进入,写法如下: data: () => ({logo: 'this.src="' + require('../assets/img.png') + '&quo ...

  4. 图片_ _Android有效解决加载大图片时内存溢出的问题 2

    Android有效解决加载大图片时内存溢出的问题 博客分类: Android Android游戏虚拟机算法JNI 尽量不要使用setImageBitmap或 setImageResource或 Bit ...

  5. Android RecyclerView使用 及 滑动时加载图片优化方案

    1.控制线程数量 + 数据分页加载2.重写onScrollStateChanged方法 这个我们后面再谈,下面先来看看RecyclerView控件的使用及我们为什么选择使用它 RecyclerView ...

  6. vue如何动态加载本地图片

    大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势. 以下正文: 今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章. 通常,我们的一个im ...

  7. Android开发中如何解决加载大图片时内存溢出的问题

    Android开发中如何解决加载大图片时内存溢出的问题    在Android开发过程中,我们经常会遇到加载的图片过大导致内存溢出的问题,其实类似这样的问题已经屡见不鲜了,下面将一些好的解决方案分享给 ...

  8. Android ListView只加载当前屏幕内的图片(解决list滑动时加载卡顿)

    最近在做ListView分页显示,其中包括图片 和文字(先下载解析文字内容,再异步加载图片)发现每次点击下一页后,文字内容加载完毕,马上向下滑动,由于这时后台在用线程池异步下载图片,我每页有20条,也 ...

  9. 【Android】首次进入应用时加载引导界面

    参考文章: [1]http://blog.csdn.net/wsscy2004/article/details/7611529 [2]http://www.androidlearner.net/and ...

随机推荐

  1. tf.random_uniform出错tensorflow2.0出错

    https://blog.csdn.net/hhy_csdn/article/details/82263007 https://blog.csdn.net/weixin_44038165/articl ...

  2. Android学习笔记之Menu的ShowAsAction属性的设置

    (1)在res--menu目录下的main.xml文件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2 ...

  3. bootstrap的editTable实现方法

    首先下载基于bootstrap的源码到本地.引用相关文件. <link href="/Content/bootstrap/css/bootstrap.min.css" rel ...

  4. Oracle JET mobile 入门使用

    Oracle JET 框架能开发 window, Android, ios 的 WebApp .主要使用 Codova 来进行开发. 简单使用 Oracle JET 开发 Android webapp ...

  5. 各种sort排序总结

    冒泡排序 选择排序 插入排序

  6. JAVA中对null进行强制类型转换(null可以强转为任意对象,并执行对象的静态方法)

    今天很好奇,对null进行强转会不会抛错.做了如下测试得到的结果是, 如果把null强转给对象,是不会抛异常的,本身对象是可以为null的. 但是如果是基本类型,比如 int i = (Integer ...

  7. 阶段3 1.Mybatis_11.Mybatis的缓存_6 Mybatis中的一级缓存

    Mybatis中的一级缓存和二级缓存         一级缓存:             它指的是Mybatis中SqlSession对象的缓存.             当我们执行查询之后,查询的结 ...

  8. springboot上传文件过大,全局异常捕获,客户端没有返回值

    最近在项目里进行全局异常处理时,上传文件超过配置大小,异常被捕获,但是接口直接报500错误,且没有任何返回值. 从后台报错日志来看,异常已经被全局异常处理捕获到了,并且也已经完成响应,为什么前端看不到 ...

  9. com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Table 'jeewx.weixin_account_user_relation' doesn't exist

    [INFO] Scanning for projects...[INFO] [INFO] ------------------------------------------------------- ...

  10. 【Linux 应用编程】进程管理 - 进程间通信IPC之共享内存 mmap

    IPC(InterProcess Communication,进程间通信)是进程中的重要概念.Linux 进程之间常用的通信方式有: 文件:简单,低效,需要代码控制同步 管道:使用简单,默认阻塞 匿名 ...