DDR爱好者之家

vue中当图片地址无效的时候,显示默认图片的方法
站长资源 2025/1/11 佚名
64 1538
DDR爱好者之家 Design By 杰米

web项目中经常需要展示图片，很可能就会碰到图片地址无效的情况，比如图片地址不对，或者后台拿到图片地址后，该地址无效，或者数据库中没有该图片等情况。这时候，图片就会显示一个叉。

对于项目中出现的这种情况，我们也可以不做处理，但是比较影响美观，所以我们都会使用一个默认的图片来代替图片原来的地址。

<img :src="/UploadFiles/2021-04-02/item.img">


给图片添加一个error校验，当图片加载失效的时候，就会调用该属性的方法。


在methods中添加如下方法：





imgError(item) {
  item.img = require('../../assets/img-default.png');
}





在方法中修改图片的地址为默认图片的地址。 


当前端通过接口从后台获取到图片的地址参数后，该参数很可能会为null,对于这种情况，我们应该做一个判断，如果该图片地址不存在，那么直接赋值一个默认的图片地址，如果该图片的地址存在，但是链接后没有获得图片，那么，这种情况就可以采用上述的方法进行完善。


以上这篇vue中当图片地址无效的时候,显示默认图片的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米