vue中img标签图片加载失败加载另一张图片

最新推荐文章于 2024-06-20 17:02:19 发布

躍d

最新推荐文章于 2024-06-20 17:02:19 发布

阅读量745

点赞数 1

文章标签： vue 前端

本文链接：https://blog.csdn.net/m0_73162280/article/details/131402191

版权

当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个图片。也就是说图片存在则显示logo.png，图片不存在将显示 error.png。

//avatar是图片路径
<div class="avatar-wrapper">
      <img :src="avatar" class="user-avatar" :onerror="defaultImg">
</div>

//defaultImg等于data里面的数据
defaultImg(){
      return 'this.src="'+ require('@/assets/images/head.jpg') +'"'
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

躍d

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中img标签图片加载失败加载另一张图片

当图片不存在时，将触发 onerror事件，而 onerror 中又为 img 指定一个图片。也就是说图片存在则显示logo.png，图片不存在将显示 error.png。
复制链接

扫一扫

vue中img src 动态加载本地json的图片路径写法

10-17

本文将深入探讨如何在Vue中使用`img`标签的`src`属性动态加载本地JSON文件中存储的图片路径。首先，重要的一点是，无论是本地JSON文件还是其中的图片URL，它们都应该放在`static`文件夹内。这是因为Vue CLI或...

VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值(1)

2401_84437095的博客

05-16

661

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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

img标签加载失败方法(onerror)、加载成功(onload)的方法、readystatechange事件、complete属性

yiyueqinghui的博客

05-20

1万+

1、error事件（img标签加载失败的方法） < img src=“123” :οnerrοr=“defaultImg()” /> function defaultImg(){ //地址错误时，直接删除img标签 this.remove() } 或者 function defaultImg(event){ //地址错误时，设置默认图片 let img = event.srcElement; img.src = ‘默认图片地址’; img.onerror

Vue中定义src在img标签使用时加载不出来

最新发布

weixin_55800388的博客

06-20

469

-vue3的语法，vue2类似--> < template > < img :src = " " /> < script setup > import {const src = ref('图片路径')；--vue3的语法，vue2类似--> < template > < img :src = " " /> < script setup > import {const src = ref('图片路径')；

Vue 中的 img 标签静态图片加载失败

m0_61069739的博客

10-17

1511

在 Vue 中使用静态图片时，图片加载失败的原因是在项目编译后 img 标签根据 src 的路径寻找不到指定的资源，举个例子，在 src/assets 文件夹下放一张图片 “Yunjin.png”，在打包后图片名变成了 “Yunjin-xxxxx.png”，而 img 标签中的 src 路径还是原来的名字。在 webpack 环境下可以使用 require() 方法，但是到了 vite 环境下 require() 方法就用不了了，不过还是有其它方法可以用的——import.meta.url。

IMG加载出错处理onerror，并能防止死循环

Welcome to Radish Blog

12-06

655

img加载图片偶尔会出错，利用onerror可以加载一个缺省图片，也可以重载同一张图片。但是都要考虑，重载的图片仍然错误，就会陷入死循环。下面给出一个带重试次数，并且延迟加载的实现，超过重试次数仍不能正常显示的，显示缺省图片。 <html> <head> <script> /** * 图片出错处理，可以重加载指定的图片。超过重试次...

解决在vue中img标签不显示图片的问题

munangs的博客

08-10

3632

解决在vue中img标签不显示图片的问题

当图片加载失败时，做处理(onerror)(vue)

weixin_61285710的博客

12-17

1636

当图片加载失败时、或者加载中，做处理(onerror)(onload)(vue)，

vue 中给img图片添加动态路径路径正确但是图片不显示问题

飞翔༒之翼

12-16

5077

【代码】vue 中给img图片添加动态路径路径正确但是图片不显示问题。

vue项目js代码中输出html代码时，使用img标签引用图片不显示的解决方法

demons19961019的博客

08-12

2297

vue项目js代码中输出html代码时，使用img标签引用图片不显示的解决方法，图片放置在public打包后的目录下。使用变量承载并require图片路径。此时页面图片展示不出来。

VUE3语法--img图片不显示/img的src动态赋值图片显示

热门推荐

雾林小妖的博客

11-27

1万+

在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。

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

10-16

在Vue.js应用中，处理图片加载失败的情况是常见的需求，特别是在提供用户界面时，确保即使图片资源出现问题，也能保持良好的用户体验。本篇文章将详细介绍如何在Vue中实现图片加载失败时用默认图片进行替换。首先...

解决vue的 v-for 循环中图片加载路径问题

10-18

在Vue中，我们可以动态绑定`img`标签的`src`属性到一个变量上，如下： ```html <img :src="item.EnName + '.jpg'" alt="flowers"> ``` 这里的`item.EnName`代表了图片的英文名称，假设图片文件名与英文名称相同，...

浅谈vue中使用图片懒加载vue-lazyload插件详细指南

08-29

在Vue组件中，你只需将`img`标签的`:src`属性替换为`v-lazy`指令，像这样： ```html <img v-lazy="'/static/img/' + item.productImage" alt=""> ``` `vue-lazyload`还提供了许多其他可配置的选项，例如...

若依前后端分离版源码分析-前端头像上传后传递到后台以及在服务器上存储和数据库存储设计

BADAO_LIUMANG_QIZHI的博客

08-27

7352

场景使用若依前后端分离版本时，分析其头像上传机制。可作为续参考学习。注：博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先是前端，登录成功点击个人中心对应的代码为 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"...

vue图片加载失败怎么替换成本地的图片呢？

weixin_55973411的博客

07-16

201

头像地址失效后，img 标签会触发 error 事件，可以绑定 @error 来处理地址失效（地址不可用）的情况。可以在这个方法下处理这个图片的问题。

解决：vue项目中，Image组件中的图片加载不出来

weixin_56554735的博客

04-11

1125

1. 将数据库里存放的是图片的网址链接，另外保存，并命名为xxx.jpg形式，并将图片都存放在了前端代码的asstes文件夹中，原因：应该是图片还没有加载出来，页面就已经渲染了，所以图片显示“加载失败”报错：GET xxxxx.jpg 403。文章主要是为了记录自己写代码中的报错。

【web】图片加载失败,重试三次, 若失败则使用占位图片

weixin_40944062的博客

05-09

1555

需求描述: 加载图片过程中,可能遇见网络不好第一次加载不出来,那么此时,需要重复加载三次,若还是失败就使用默认的占位图解决思路监听图片的error事件, 当图片上的error事件被触发,就进入我们自定义的重新加载方法, 其实方法中, 就是需要一个定时器,在规定的时间内, 去给img的src重新赋值, 每一次赋值就相当于刷新图片一次, 当重试的次数,达到我们规定的次数,就将img的src设置为我们默认的占位图, 然后, 这里需要取消定时器. 基本实现 1. 监听图片的error事件 2. 开启一个

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

u011504432的博客

07-05

1406

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

vue中使用img加载不出图片

07-14

在Vue中使用img标签加载图片时，可能会遇到加载不出图片的问题。以下是几个常见的解决方法： 1. 检查图片路径：确保图片路径是正确的，可以使用绝对路径或相对路径。如果使用相对路径，请确保路径相对于Vue组件的位置。 2. 检查图片名称和扩展名：确认图片的名称和扩展名是否正确，比如文件名大小写是否匹配，扩展名是否正确。 3. 检查网络连接：如果图片路径指向的是网络图片，确保网络连接是正常的。 4. 使用require导入图片：如果你的图片是在项目中的静态文件夹中，可以使用require导入图片。例如： ```javascript <template> <img :src="require('@/assets/images/my-image.jpg')" alt="My Image"> </template> ``` 5. 检查图片尺寸：在某些情况下，当图片尺寸为0时，可能无法正确加载。请确保图片尺寸正确。 6. 检查图片格式：有些浏览器不支持某些图片格式，例如WebP格式。请检查你使用的浏览器是否支持该图片格式。 7. 清除缓存：有时候浏览器会缓存旧版本的图片，导致新的图片无法加载。可以尝试清除浏览器缓存或在URL中添加一个随机参数来强制刷新图片。希望以上方法可以帮助你解决加载不出图片的问题。如果问题仍然存在，请提供更多的详细信息，以便我能够更好地帮助你。