vue图片加载错误 显示默认图片

最新推荐文章于 2024-08-20 10:32:53 发布
最新推荐文章于 2024-08-20 10:32:53 发布
阅读量2k 收藏
点赞数
分类专栏： vue JavaScript 小技巧
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caoyan0829/article/details/82970023
版权 
<img :src="item.logo + '?x-oss-process=style/hd'" v-if="item.logo" class="house-photo"  :onerror="defaultImgEro"/>





defaultImgEro:'this.src="https://img.cdn.zhaoshang800.com/img/2018/08/08/broker/2f7a81a2-289c-41af-823a-0efe7b11f1f2.png?x-oss-process=style/hd"',

注意defaultImgEro的写法

 

左边分享一个公众号，写一些散文和影评等，右边的是博主自己的二维码，欢迎一起讨论。

                    

最低0.47元/天 解锁文章
ajaxPost293614
关注
专栏目录
vue图片加载失败时显示默认图片
qq_39937784的博客
12-16 1176
main.js Vue.prototype.$headError = function(e) { e.target.src = require("@/assets/img_error.png"); } 使用 <img :src="url" @error="$headError"/>
解决vue项目打包后提示图片文件路径错误的问题
08-27
主要介绍了解决vue项目打包后提示图片文件路径错误的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
img 加载失败特定默认图片
最新发布
weixin_50559423的博客
08-20 556
本文讲解一个简单的问题，平常我们开发的时候难免用到标签。当图片src地址不存在 及 加载失败的时候，想给一张加载失败的图片。直接上代码。 第二种 在vue中 直接直接使用 @error事件 第三种 当你确认src 可能为空或者是错误时 给一个或的条件 以上就是 图片加载失败的 显示其它默认图片的处理。看完别忘记点赞哦，小二在此谢过了！
vue加载图片失败处理
weixin_43952807的博客
04-25 1844
<img :src="item.info.headimgurl" alt="" @error="errorImg()"> data：otherimg:'图片地址', methods：errorImg(){ let img = event.srcElement; img.src = this.otherimg; img.onerror = null; //防止闪图 } vue中的图片错误方法 在此备用 ...
vue，图片加载错误是显示默认图片
peade的博客
10-28 695
在vue里，图片加载错误，显示默认头像问题。我在网上查到了好些解决方法，使用起来感觉都不是特别方便。在这里简单写了一个插件，自己试用了一下，基本没问题。 function Install(Vue) { Vue.directive('imgerr', { // 当元素被插入到DOM中时... inserted: function() {}, // 绑定，只调用1次 bind: function(el, binding) { el.onerror = functi
uni-app Image组件在加载图片发生错误时，显示默认图片
热门推荐
yyxhzdm的博客
08-19 1万+
效果图： image属性 根据数据结构来对 @error 属性进行传参 其实最终的目的是将图图片加载失败的那条数据，替换成默认图片的路径 （1）.如果你图片的加载是这种就是单层循环 ： <image v-for="(imgurl ,index_img) in attachList" :src="imgurl.attachUrl" mode="aspectFill" @error="imgerror($event, index_img )"></...
Vue+webpack 图片加载出错【已解决】
weixin_43092295的博客
07-13 561
使用vue+webpack显示图片 在页面中想上传本地图片代码为： <img src="../../images/menu1.png" alt=""> 其中该图片所在的位置为src/image，编写的代码为src/componernts/tabbar 结果出错 [object%20Module]:1 GET http://localhost:3000/[object%20Module] 404 (Not Found) 解决办法： 将相对路径写成绝对路径： <img src="src/i
vue图片加载失败时用默认图片替换的方法
10-16
3. **编写事件处理函数**：在Vue组件的方法中，定义`handleImageError`函数，用于处理图片加载错误，将`imgSrc`替换为`defaultImg`： ```javascript methods: { handleImageError(event) { event.target.src = ...
vue中当图片地址无效的时候,显示默认图片的方法
10-18
综合来看，以上方法不仅可以有效解决图片地址无效时显示默认图片的需求，而且适用于大部分Vue项目中图片资源管理的场景。通过这些操作，可以大大提高用户界面的友好度，增强用户体验。希望本文内容能够为读者在处理...
vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
weixin_29369017的博客
01-17 1139
vue图片加载失败时用默认图片替换的方法前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧方法如下原理就是给img绑定error事件，替换原有的src地址。首先在data中创建一个defaultImg(随便起的)，里面的值是该默认图片的地址；在html页面的img标签上绑定该属性这样默认图片就设置好了；这样做...
基于vue 动态加载图片src的解决方法
08-28
这样就会导致图片加载不出来，返回 404 错误码。 二、 assets 和 static 的区别 在 Vue 项目中，我们经常会看到 assets 和 static 两个文件夹。那么，这两个文件夹有什么区别呢？assets 文件夹是指在项目编译过程...
vue 图片加载及报错解决
LuckyisLhh的博客
01-26 917
vue 图片加载
vue--当从后台加载的图片出错时显示默认的图片
Call_me_small_pure的博客
10-25 2900
<img id="showimg" v-bind:src='userSrc' @load="success" @error="error" >JS：function error() { list.userSrc="../img/userInfo/tuceng3.png"; }
Vue中图片图片加载失败性能优化
qq_53114797的博客
01-30 266
场景：基本上我们项目中的图片都是通过后台传过来我们再渲染到dom上面，但是app一旦上线之后呢，如果后台报错，我们接收不到图片，就会对用户有不好的体验感。
vue图片异常处理
Liingot的博客
07-09 602
加载失败时默认效果 处理后 <img :src="item.imgUrl" v-on:error.once="moveErrorImgSmall($event)" alt=""> moveErrorImgSmall: function (event) { event.currentTarget.src = require('./image/default_small.png'); },
vue后台拿图片报错解决方法
每文的博客
10-17 1784
最近在做一个关于vue的项目，去后台拿图片时，最后图片出来了，但是控制台却报错404，这里记录一下解决方法： 分析了下，这样写有个问题，去后台拿图片名称需要时间，项目一运行就开始加载页面，没有拿到图片名称控制台就报个undefined错误。obj.imageUrl=undefined &lt;img v-lazy="'http://localhost:1337/upload/'+obj....
Vue图片加载错误、图片加载失败的处理
大家好，我是+V
11-04 1679
Vue图片加载错误、图片加载失败的处理 注意： onerror前面要用冒号 : 注意看logo定义的格式，符号不要写错了 <img :src="pic?pic:'../../assets/placeholder.png'" :onerror="errorImage" alt=""> <script> export default { data() { return { errorImage: 'this.src="'
Vue 图片加载失败处理
weixin_42889176的博客
02-02 964
很多人会使用@error方法在图片加载的方式但是这种方式在默认图片加载失败时，，所以我使用了的方式
vue 图片404 替换默认图
09-06
在Vue中，可以使用`v-bind`指令来绑定图片的属性值。如果图片无法加载（即返回404错误...该方法会将`imagePath`变量更新为`defaultImage`，从而显示默认图片。 这样，在图片加载出错的情况下，就能够替换为默认图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值