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

最新推荐文章于 2024-07-25 09:24:40 发布

躍d

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量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或...

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

10-18

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

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

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

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

2401_84437095的博客

05-16

667

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

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

weixin_55800388的博客

06-20

482

-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

1512

在 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标签加载图片失败时，显示一张自定义默认图片

热门推荐

干饭搬砖两不误。

07-29

1万+

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

vue中img标签图片加载时与加载失败的处理方法

qq_29328065的博客

06-08

6309

开发过程中经常需要和图片处理打交道，看了网上很多有关图片处理的方法，都是讲解得一知半解，没有比较全面的总结。下面，将简单总结一个我们通过vue去处理img标签过程中，图片加载时，与图片加载失败时的处理方法。 1.常见的一个图片的处理流程，当接收到图片时，若图片较大，或者网络较慢的情况，图片还未加载完成，此时需要显示一个正在加载中的图片提示用户图片正在加载中。当图片加载或读取完毕时我们才替换需要显示图片显示到标签上。主要用的是img标签中的onload方法进行处理,代码如下： <!DOCTYPE htm

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

u011504432的博客

07-05

1406

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

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

qq_14993591的博客

08-30

449

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

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

10-16

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

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

08-29

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

ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间

yangshuquan的专栏

07-24

808

在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。

在Vue程序中，如何检测用户的登录状态并跳转到对应页面

最新发布

exlink2012的专栏

07-25

395

通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。

Windows10+vs 2017中创建WEB API教程

Explinks的博客

07-24

999

本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。

Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空

FangX_u的博客

07-24

591

采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。

TS如何处理js模块的类型？

闻人放歌的三寸青草园圃

07-24

279

【代码】TS如何处理js模块的类型？

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中添加一个随机参数来强制刷新图片。希望以上方法可以帮助你解决加载不出图片的问题。如果问题仍然存在，请提供更多的详细信息，以便我能够更好地帮助你。