vue加载图片出现404用默认图片替换的方法

最新推荐文章于 2023-07-19 14:03:15 发布

菜鸟圈大当家

最新推荐文章于 2023-07-19 14:03:15 发布

阅读量1.3k

点赞数

分类专栏：前端 vue 文章标签： vue 404 默认图片 onerror

本文链接：https://blog.csdn.net/m0_37780367/article/details/103142640

版权

前端同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

vue

22 篇文章 0 订阅

订阅专栏

根据不同类型图片加载时，根据后台返回的路径灌入src中后，src不为空，但是找不到对应路径的图片时会有叉号显示，展示不友好，需要用默认图片对应展示。

此时需要走onerror方法指定默认src路径

<img :src="node.data.imglogo|showLogo" v-if="node.data.imglogo" style="height:15px;" onerror="this.src='${ctx}/images/logo/HARDWARE/DEFAULT.png'"/>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

菜鸟圈大当家

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

weixin_29369017的博客

01-17

1192

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

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

10-16

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

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

解决js图片加载时出现404的问题

10-23

主要介绍了解决js图片加载时出现404问题的方法，这方面有困惑的朋友可以参考一下

vue项目出现替换图片出现404的错误

hailangtuteng的博客

07-10

1009

最近接手了一个项目需要替换logo图标、UI设计好新的图片放进项目中出现localhost:999/images/login-logo.png找不到的错误通过各种写法 require 、 important 发现都没有用结果打印图片发现是一串地址、打印以前的图片是base64位编码结果通过看base64位相关文章和看代码发现对图片的大小做了限制不能比以前的图片尺寸大太多否则会出现找...

Vue 图片加载404处理方法及全局注册函数

开发猫

07-20

1285

Vue 图片加载异常处理 <img :src="imgUrl" @error="errorImg" /> errorImg(event) { let img = event.srcElement img.src = require('@/assets/img/noImg.png') img.onerror = null //防止一直跳动 } 全局注册函数暂时排除使用Vue.use注册函数的方式（多写一些繁琐的代码）公共函数js funct..

Vue2，后端返回的图片404时，前端如何用本地图片代替

ANTINODE的博客

04-14

550

本文讲解了在后端返回的图片在404的情况下，前端如何用本地图片代替的方法

踩坑日记：Vue启动加载图片出现404怎么解决

王声声的博客

05-23

1259

1、项目结构 2、img的路径引用 3、路径修改（在变量路径里加上require就OK了）

vue 图片 404 显示默认图片

ITLISHUANG的博客

08-15

862

写在前： vue中循环显示图片，报错404，未加载图片的情况下可以使用默认图片 <img v-if="onswitch" :src="oneurl" alt="图片" onerror="this.src = '线上图片地址'"> 注：测试中本地图片没有实现效果

图片404替换

weixin_43728978的博客

10-21

527

当你从后台拿到图片地址的时候，你不知道这个图片是否能显示那你可以这样做如果为404替换成默认图片 <img src="你从后台或者别的地方拿到的图片地址" onerror="noFind()"> function noFind(){ let img=event.srcElement; img.src="默认图片地址"; img.onerror=null; /...

uni-app image加载错误 404 替换为默认图片

zyue_1217的博客

07-19

2044

绑定图片src属性为aitem.cat_icon,

vue实现图片加载完成前的loading组件方法

08-28

在这个例子中，我们使用 onerror 事件来处理图片加载失败的情况，並將错误图片替换为默认图片。知识点六：JS 代码实现除了使用 Vue 组件外，我们还可以使用纯 JS 代码来实现图片加载前的 Loading 效果。在这个...

vue实现图片懒加载的方法分析

11-21

在 Vue 模板中，我们可以使用 `v-lazy` 指令替换 `src` 属性来实现图片的懒加载： ```html ``` 四、Vue Lazyload 高级配置 1. **容器配置**：如果你需要对一组图片进行统一的懒加载配置，可以使用 `v-...

vue动态加载src出现图片404

weixin_45378776的博客

10-08

1450

data底下images:’ …/assets/bg.jpeg ’ 刚开始是想通过:src动态加载图片,把src设置为images变量,发现直接不显示图片错误为: 后来查了资料,修改为将图片作为模块加载进去, 修改后: data处修改为发现直接报错: 后来修改为: 原因：在webpack中会将图片图片来当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址，然后...

Thinkphp5.1的验证码图片不显示，错误提示404

冰丫冰的博客

08-07

1240

Thinkphp5.1项目中的验证码图片不显示，错误提示404 错误现象：使用tp5框架的验证码时候出现了该错误 [图片]captcha console中提示： Failed to load resource: the server responded with a status of 404 (Not Found) 该错误是因为修改了tp5框架中pbulic目录->.htaccess文件中的参数，想要隐藏index.php 解决方式：(去掉问好？，就是这么简单！) 正确代码： <IfMo

图片404 js Promise 替换图片

qq_35570179的博客

08-16

132

图片404 js Promise 替换图片。

vue 引用src中的文件_vue模板中对图片src的动态引入（路径）问题

weixin_39765100的博客

12-22

1147

pay attention: 书写本文时vue的版本还是2.X。在做移动端项目时，底部导航的名称和图片习惯于用json文件中引入数据。而在vue项目中，当要在中动态引入图片时，若直接从json文件中导入item.src字段为'assets/image/XX.png'的值到:src="XXX"中时，会出现图片404的情况。如:这么循环引入img图片，页面会报404，表明从指定的路径上去找是找不到图片...

JS判断图片是否加载完成背景图404 快到碗里来

weixin_30657999的博客

08-01

316

面对这个问题我最多做到表面笑嘻嘻 …… 真不知道测试怎么那么…… 啥都能给你测出来有的没的都能给你测出来算了算了谁让本仙女本精灵本可爱温柔大方善解人意呢 …呵呵呵 ————————————正文开始了———————————— 这是一个动态更换登录页面背景图的功能但是如果客户的相对应的文件夹没有更换过图片的话就要有默认显示的图片 logoBg就是默认显示的图片 logoU...

安装谷歌浏览器，提示电脑已经安装了更高版本的浏览器的解决方法