### 实现
Vue3 中正确加载和
显示图片的方法
在
Vue3 开发过程中，如果需要加载并
显示图片资源，可以采用多种方式来解决问题。以下是针对不同场景下的解决方案：
#### 1
. 静态资源路径配置
当项目中的
图片位于 `public` 文件夹下时，可以直接通过相对路径
访问这些文件。这种方式适用于不需要经过 Webpack 打包的静态资源。
```html
<img src="/images/example
.png" alt="Example">
```
需要注意的是，在这种情况下，
图片路径应相对于 `public` 文件夹设置[^1]。
---
#### 2
. 动态加载
图片资源
对于动态加载的
图片资源，推荐使用 ES6 的 `import` 语法提前引入
图片路径。这种方法能够确保
图片被正确打包到最终构建产物中。
```javascript
// 提前导入
图片
import imgPath from '@/assets/images/example
.png';
export default {
data() {
return {
imagePath
: imgPath,
};
},
};
```
随后可以在模板中绑定该变量作为 `<img>` 标签的 `src` 属性值：
```html
<img
:src="imagePath" alt="Dynamic Image">
```
此方法利用了 Webpack 对于模块化资源的支持，从而避免了因路径解析而导致的
404 错误[^2]。
---
#### 3
. 使用数组批量管理多张
图片
如果需要一次性加载多个
图片，则可以通过循环的方式定义一个包含所有
图片路径的列表，并借助响应式数据结构（如 `reactive` 或者 `ref`）对其进行维护。
```javascript
import { reactive } from '
vue';
import img1 from '@/assets/img/
index/
index1
.jpg';
import img2 from '@/assets/img/
index/
index2
.jpg';
import img3 from '@/assets/img/
index/
index3
.jpg';
const imgs = reactive([img1, img2, img3]);
```
接着可在组件内部遍历渲染这些
图片：
```html
<template>
<div v
-for="(item,
index) in imgs"
:key="
index">
<img
:src="item"
:alt="'Image ' + (
index + 1)">
</div>
</template>
```
上述代码片段展示了如何高效地管理和展示一组本地存储的
图片资源[^3]。
---
####
4. 处理运行时路径差异
有时会发现开发环境与生产环境中
图片的实际加载地址存在偏差。为了避免此类问题的发生，建议始终遵循统一的标准写法——即基于别名 (`@`) 来定位 assets 下的具体位置。这样无论是在哪个阶段执行部署操作，都能保持一致的行为表现。
例如：
```javascript
import logo from '@/assets/logo
.png'; // 正确的做法
```
而非硬编码绝对或者相对路径字符串形式传递给 HTML 元素属性之中。
---
### 总结
综上所述，
Vue3 中实现
图片正常
显示的关键在于合理运用现代前端框架所提供的特性以及配套工具链的能力。无论是简单的静态引用还是复杂的动态加载需求都可以找到对应的解决策略加以应对。
本文探讨了在Vue.js项目中实现默认头像组件的方法，包括如何使用自定义的默认头像图片，以及如何在头像加载失败时切换到备用图片。
扫一扫
625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
