在文件中的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图片不存在时加载默认图片的更多相关文章

  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. 把网站从 http 转换成 https

    基础准备: 一台服务器,一个主域名或多级域名,本次申请的免费 本次环境使用 centos6.5 + nginx1.8 + jdk1.8 + tomcat8 如果需要收费的请参考: 云盾证书服务(包年) ...

  2. Sql 中的as是什么意思 + 无列名注入解析

    相当于取别名 这里结合一下无列名注入的知识点: 这种方法在第十届SWPUCTF的web1——广告招租里考到了:

  3. centos7 升级php版本

    centos7 默认PHP5.4,版本太低,很多要求至少PHP5.5 1.查看已经安装的PHP组件 yum list installed| grep php php.x86_64 -.el7 @bas ...

  4. leetcode-mid-sorting and searching - 240. Search a 2D Matrix II -NO

    mycode   time limited def searchMatrix(matrix, target): def deal(data): if not data: return False ro ...

  5. JS 替换所有的空格

    在JS中替换掉输入框内的空格,是在处理表单需求的时候极为常用的一项操作,以防止用户的操作习惯引起数据异常,保证传参的安全性. NO.1 name.replace(" "," ...

  6. Go开发[八]goroutine和channel

    进程和线程 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位. 一个进程可以创 ...

  7. 【SSH】---【Struts2、Hibernate5、Spring4】【散点知识】

    一.Struts21.1.Struts2的概念Struts2是一个用来开发MVC应用程序的框架,它提供了Web应用程序开发过程中的一些常见问题的解决方案:    ->对来自用户的输入数据进行合法 ...

  8. ELK是什么

    为什么做日志系统 通常当系统发生故障时,工程师需要登录到各个服务器上,使用 grep / sed / awk 等 Linux 脚本工具去日志里查找故障原因.在没有日志系统的情况下,首先需要定位处理请求 ...

  9. IntelliJ IDEA调试时,格式化显示日期变量

    格式化前: 格式化后: new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(this); 入门常用知识: Ct ...

  10. cocos2dx基础篇(21) 进度条CCProgressTimer

    [3.x] (1)去掉 "CC" (2)CCProgressTimerType 改为强枚举 ProgressTimer::Type:: // RADIAL //扇形进度计时器 BA ...