Vue3 中封装函数实现加载图片&加载失败兜底方案。

最新推荐文章于 2025-06-28 20:37:11 发布

小码龙~

最新推荐文章于 2025-06-28 20:37:11 发布

阅读量663

点赞数 13

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端 javascript 笔记 Vite ts

本文链接：https://blog.youkuaiyun.com/qq_48076747/article/details/147303867

Vue 专栏收录该内容

30 篇文章

订阅专栏

文章目录

- - Vue3 中使用动态加载图片并处理加载失败的情况

Vue3 中使用动态加载图片并处理加载失败的情况

在开发 Vue3 应用时，我们经常会遇到需要动态加载图片的场景。例如，图片资源可能从后端获取，或者需要加载用户上传的图片。如果图片加载失败，通常我们会希望显示一张默认的兜底图片。本文将介绍如何使用 Vue3 的组合式 API 实现这一功能。

实现思路

动态加载图片：通过 JavaScript 的 Image 对象，动态加载图片资源。
监听加载状态：使用 onload 和 onerror 事件，分别处理图片加载成功和失败的情况。
使用 Vue3 的 ref：将图片的 src 绑定到 Vue 的响应式数据中，以便在加载失败时动态切换到兜底图片。

代码实现

以下是完整的代码实现：

<template>
  <img :src="src" width="300" alt="" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const src = ref('')
const loadImg = (
  src: string,
  callback: (err: Error | Event | null | string, src?: string) => void
) => {
  const img = new Image()
  img.src = src
  img.onload = () => {
    callback(null, src)
  }
  img.onerror = (err) => {
    callback(err)
  }
}
loadImg('/src/assets/logo.svg', (err, res) => {
  if (err) {
    console.log('图片加载失败，使用兜底图片:', err)
    src.value = '/src/assets/2.jpg'
  } else {
    console.log('图片加载成功:', res)
    if (res) {
      src.value = res
    }
  }
})
</script>

<style scoped></style>

代码解析

动态加载图片：
- 使用 new Image() 创建一个图片对象。
- 设置 img.src 为目标图片的 URL。
- 使用 onload 和 onerror 事件分别处理加载成功和失败的情况。
Vue3 的响应式数据：
- 使用 ref 定义响应式变量 src，并将其绑定到 <img> 标签的 src 属性。
- 当图片加载失败时，通过 src.value 动态切换到兜底图片。
回调函数：
- 回调函数接收两个参数：err（错误信息）和 res（成功加载的图片 URL）。
- 根据加载结果，决定是使用目标图片还是兜底图片。

注意事项

路径问题：
- 图片路径需要正确配置，特别是在使用 vite 或 webpack 等构建工具时，静态资源路径可能需要通过 import 或 require 引入。
- 例如，可以将兜底图片路径改为：import fallbackImg from '@/assets/2.jpg'，然后使用 src.value = fallbackImg。
错误处理：
- 在 onerror 回调中，可以记录详细的错误信息（如 err.message），以便调试。
样式优化：
- 可以根据需求为图片添加样式，例如设置固定宽高、圆角等。