vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue图片加载失败@error函数

@error函数vue图片加载失败空白页解决方案

作者:肥晨

这篇文章主要介绍了@error函数vue图片加载失败空白页解决方案,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

@error函数

vue项目中 img标签加载失败(404)方法,@error事件。

也可以用于项目中空白页的研发。

img标签中有一个onerror事件。是当引用的src属性获取不到图片,或者网络错误导致无法正常显示src属

性的图片时,显示的提示错误图片或者是可以代替的万能图片。

@error就是onerror。

如何使用?

html代码:

<img
    :src="item.imageUrl"
    class=""
    @error="imgError"
 />

JavaScript代码:

imgError(e) {
      e.srcElement.src = require("图片地址");
    },

可能出现的问题

碎片图标反复闪烁

imgError(e) {
      e.srcElement.src = require("图片地址");
      e.srcElement.onerror=null;
    },

以上就是@error函数vue图片加载失败空白页解决方案的详细内容,更多关于vue图片加载失败@error函数的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文