img 图片加载失败后展示本地展示

最新推荐文章于 2025-02-18 21:19:12 发布

Ashy-

最新推荐文章于 2025-02-18 21:19:12 发布

阅读量364

点赞数 3

分类专栏： js实用经验用户体验极佳前端笔记文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43794299/article/details/138191741

版权

前端笔记同时被 3 个专栏收录

14 篇文章

订阅专栏

js实用经验

5 篇文章

订阅专栏

用户体验极佳

5 篇文章

订阅专栏

本文介绍了如何在Vue3项目中，当图片网络请求失败时，使用v-if和error事件处理机制，自动切换为加载本地图片。通过`ref`和自定义`handleError`函数，确保用户体验流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3 图片预览实现网络图片请求失败后加载本地图片

html 代码：

<img v-if="logo" :src="imgSrc" @error="handleError" />

script 代码：

import localImg from '@/assets/logo.png'

const networkImg = 'https://img1.baidu.com/it/u=3758226780,1374010260&fm=253&fmt=auto&app=138&f=JPEG?w=701&h=500'

// 默认读取网络图片
const imgSrc = ref<string>(networkImg)

const handleError = () => {
	// 网络图片加载失败则展示本地图片
    imgSrc.value = localImg
}