vue中图片加载失败时显示默认图片

最新推荐文章于 2024-12-26 12:28:44 发布

珍珠藏着贝壳里

最新推荐文章于 2024-12-26 12:28:44 发布

阅读量254

点赞数

分类专栏： js vue 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_52608028/article/details/117438380

版权

js 同时被 2 个专栏收录

15 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

<img :src="p.courseJacket?p.courseJacket : '' " :onerror="logo">

 data(){
    return{
      logo:'this.src="' + require('../assets/img/kecheng.jpg') + '"',
    }
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

珍珠藏着贝壳里

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue图片img加载失败显示自定义默认图片(缺省图)

qq_39695210的博客

10-09

3316

vue图片img加载失败显示自定义默认图片(缺省图)

vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法

weixin_29369017的博客

01-17

1272

vue图片加载失败时用默认图片替换的方法前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧方法如下原理就是给img绑定error事件，替换原有的src地址。首先在data中创建一个defaultImg(随便起的)，里面的值是该默认图片的地址；在html页面的img标签上绑定该属性这样默认图片就设置好了；这样做...

参与评论您还未登录，请先登录后发表或查看评论

vue图片加载失败时用默认图片替换的方法

10-16

主要给大家介绍了关于vue图片加载失败时用默认图片替换的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

Vue 图片加载失败显示默认图片

weixin_45128657的博客

04-15

1339

【代码】Vue 图片加载失败显示默认图片。

VUE：img标签加载图片失败时，显示一张自定义默认图片

最新发布

LCG元的博客

12-26

836

在 Vue.js 组件开发中，处理图片加载失败并自动显示默认图片可以通过 Vue 的指令和事件绑定来实现这一功能。

img 加载网络图片失败显示默认图片的方法

08-30

下面小编就为大家带来一篇img 加载网络图片失败显示默认图片的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

vue项目中 img标签加载图片失败，让其显示默认图片

u011504432的博客

07-05

1514

vue项目中 img标签加载图片失败，让其显示默认图片

vue3 图片加载报错时，设置默认图片

weixin_44565776的博客

05-16

885

在项目开发中，图片因为各种原因加载失败，这时候需要设置默认的图片（暂无图片.png）

vue 图片显示失败显示默认图片

weixin_46544600的博客

05-12

1112

写法一 <img class="headerImg" :src="item.headImg || './images/common/rankingpic.jpg'" onerror="this.src='./images/common/rankingpic.jpg';" alt=""> 写法二（在脚手架中需要用require 拿到默认图片资源） <img class="headerImg" :src="''" :onerror="defaultImg" alt=""> //

[vue] img标签加载图片失败时，显示一张自定义默认图片

qq_14993591的博客

08-30

515

【代码】[vue] img标签加载图片失败时，显示一张自定义默认图片。

Vue中实现当img图片加载失败的时候显示本地默认图片

JackieDYH的博客

05-31

199

Vue中实现当img图片加载失败的时候显示本地默认图片。

vue命令:onerror设置<img>加载失败的默认图片

MG516的博客

11-12

8479

<img :src="goodsItem.thumb_url?goodsItem.thumb_url:'/src/assets/logo.png'" :onerror="errorGoodsImg"> export default { data(){ return { errorGoodsImg:"this.src='/src/assets/l...

Vue 图片加载失败，显示默认图片

qq_42341025的博客

01-25

2628

后台返回图片访问404，如果只用v-if ，图片没加载出来还是会留个空位置在，给 img 加上 onerror 属性就可以了，简单粗暴，暂时没什么问题后面找到更有效的方法，在vue里面使用： <div class="img-box"> <img v-if="item.captureUrlFull" :key="it...

如何在Vue中处理图片加载失败的情况？

11-12

在Vue中处理图片加载失败的情况，通常会在`<img>`标签上使用`v-bind:src`结合计算属性，同时设置一个默认的占位符或者错误图标。当图片加载失败时，计算属性会返回一个备用的路径或者错误提示。这里有一个简单的例子： ```html <template> <div> <img :src="computedImageUrl" alt="加载中..." :error="defaultImageUrlOrError"> </div> </template> <script> export default { data() { return { imageUrl: 'https://example.com/image.jpg', // 原始图片地址 defaultImageUrl: 'placeholder.jpg', // 默认占位图 errorImageUrl: 'error.png', // 错误图标 computedImageUrl: () => { const img = new Image(); img.src = this.imageUrl; if (img.complete || img.error) { return img.src; // 如果图片已经加载完成或加载失败，则返回实际url } else { return this.defaultImageUrl; // 图片正在加载中，返回默认路径 } }, }; }, }; </script> ``` 在这个例子中，如果图片成功加载，`computedImageUrl`会返回原始图片地址；如果图片加载失败或者加载过程中需要等待，它会返回默认图片地址。