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

Vue图片加载错误、图片加载失败的处理比如后台返回的一个图片字段pic,我们通常在代码里,会做一个检验图片,通常会像下面这样写<img:src=”pic?pic:’../../assets/img/load.png'”alt=””>这个判断只能判断pic是否存在,只有pic=”的情况下,才回显示设置的默认图片,但是如果pic这个字段是有值的呢,并且是一个错误的值,或者一个找不到的404的图片呢?这个时候就要…

大家好,又见面了,我是你们的朋友全栈君。

加载一个图片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>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/137303.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java任务调度框架Quartz教程

    Java任务调度框架Quartz教程一、什么是quartz作业调度? Quartz框架是一个全功能、开源的任务调度服务,可以集成几乎任何的java应用程序—从小的单片机系统到大型的电子商务系统。Quartz可以执行上千上万的任

    2022年7月2日
    36
  • 八皇后算法解析[通俗易懂]

    八皇后算法解析[通俗易懂]今天研究力扣的一道题死活写不出来对应的算法,没办法自己算法基础太差。于是看了下答案,发现使用什么回溯算法,菜鸟表示平时开发期间写的最复杂的程序就是写了两层for循环,已经很牛逼了有木有?这个回溯算法什么鬼?于是乎百度了下,算是了解了回溯算法是什么玩意儿。这里分析一波八皇后算法来加深一下理解。https://blog.csdn.net/microopithecus/article/details/…

    2022年4月20日
    56
  • goLand 2022.01激活码-激活码分享

    (goLand 2022.01激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年4月1日
    777
  • 五种边缘检测算法(附代码)

    五种边缘检测算法(附代码)一 Roberts 边缘检测算子 Roberts 边缘检测算子根据任意一对互相垂直方向上的差分可用来计算梯度的原理 采用对角线方向相邻两像素之差 即 然后根据式 1 9 2 计算出 Roberts 的梯度幅度值 它们的卷积算子为 Roberts 检测器较为简单 但具有一些功能上的限制 例如 它是非对称的 而且不能检测诸如 45 倍数的边缘 然而 它还是经常用于硬件实现中 因为它既简单又快速 二 Sobel 边缘检测算子对数字图像的每个像素 考察它上下左右邻点灰度的加权差 与之接近的邻点的权大 据此 定

    2025年8月19日
    5
  • 小米4开启太极·阳

    小米4开启太极·阳机型小米4有很多版本,手中手机后面的入网许可证写着的是TD-LTE,系统设置中的名称为:MI4LTE刷入开发版Rom小米4miui官网rom地址:小米4小米4-电信3G版/移动版/联通版小米4miuirom官方下载地址:miui_MI3WMI4W_8.9.13_8001b58f3b_6.0.zip按照官方刷机教程刷入开发版rom,刷入前记得双清。获取root权限刷完rom后,打开安全中心-应用管理-权限管理-root权限开启刷入第三方recovery…

    2022年6月4日
    75
  • Pycharm连接mysql数据库报错1130,1054「建议收藏」

    Pycharm连接mysql数据库报错1130,1054「建议收藏」Pycharm连接mysql报错1130,1054

    2022年8月27日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号