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)
上一篇 2022年6月2日 上午10:00
下一篇 2022年6月2日 上午10:00


相关推荐

  • js判断输入字符串是否为空、空格、null总结

    js判断输入字符串是否为空、空格、null总结判断字符串是否为空 varstrings nbsp if string length 0 nbsp nbsp alert 不能为空 nbsp 判断字符串是否为 空 字符即用户输入了空格 nbsp varstrings nbsp if strings replace s s g length 0 nbsp nbsp alert 不能为

    2025年6月22日
    6
  • git 创建邮箱 用户名_初次安装git配置用户名和邮箱及密钥

    git 创建邮箱 用户名_初次安装git配置用户名和邮箱及密钥在 Windows 上使用 Git 可以从 Git 官网直接下载安装程序 网速慢的同学请移步国内镜像 然后按默认选项安装即可 安装完成后键盘敲上 windows r 你会看到 输入 cmd 敲回车打开命令行窗口 然后输入 git 如果出现下面这些提示说明 git 已经安装成功了 安装完成后 还需要最后一步设置 在命令行输入下面两条命令 gitconfigglo name 这里面填你的名字

    2026年2月13日
    2
  • 小主机装OpenClaw,白忙一整天,来看看我踩了多少坑

    小主机装OpenClaw,白忙一整天,来看看我踩了多少坑

    2026年3月12日
    3
  • 5g切片隔离原理_5G切片编排器

    5g切片隔离原理_5G切片编排器5G网络切片安全隔离机制与应用*毛玉欣1,陈林2,游世林1,闫新成1,吴强1【摘要】介绍了满足多样化垂直行业应用的5G网络服务化架构和网络切片实现。针对5G网络架构重构、网络部署形态的变化,研究提出了网络切片端到端安全隔离的实现方法,包括切片在接入网络、承载网络和核心网络中的隔离实现。结合典型行业应用的要求,给出了定制化切片的隔离实现案例。【关键词】垂直行业;服务化架构;网络切片;切片隔离引用格式:毛玉欣,陈林,游世林,等.5G网络切片安全隔离机制与应用[J].移动通信,2019,4

    2026年4月17日
    8
  • 月之暗面发布Kimi长思考模型API

    月之暗面发布Kimi长思考模型API

    2026年3月12日
    2
  • python批量下载网页图片_Python下载图片

    python批量下载网页图片_Python下载图片根据图片url。批量下载图片:importosimportrequestspath=os.getcwd()+’\\abc\\’#设置图片文件路径,前提是必须要有abc这个文件夹importpandasaspddf=pd.read_excel(‘url1.xlsx’)urls=df[‘url’]foriinrange(len(urls)):print(i)#url=’http://pic.qiushibaike.com/syste..

    2025年11月24日
    4

发表回复

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

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