vue3引入本地图片
时间: 2025-04-27 07:30:13 浏览: 25
### 如何在 Vue 3 项目中正确地引入和使用本地图片
#### 使用相对路径导入静态资源文件
当开发 Vue 应用时,可以利用 Webpack 的模块解析功能来加载静态资产。对于位于 `src` 文件夹内的组件而言,推荐采用相对于该组件的位置指定图像路径的方式。
例如,在 `/data/zkos/comm/libzkos_comm/tools/performance_test/django_project/vue_template/src/components/ExampleComponent.vue` 中添加如下代码片段[^3]:
```vue
<template>
<div class="example">
<!-- 假设有一个名为 logo.png 的图片放在同一目录下 -->
<img :src="require('./logo.png')" alt="Logo"/>
</div>
</template>
<script setup>
// 这里不需要额外处理
</script>
```
#### 将公共静态资源放置于 public 文件夹并引用
如果某些资源在整个应用程序范围内都需要访问,则可将其置于项目的根级 `public` 文件夹内。此时可以直接通过 URL 访问这些资源而无需借助 `import` 或者 `require()` 函数。
假设存在一张背景图存放在 `/data/zkos/comm/libzkos_comm/tools/performance_test/django_project/vue_template/public/images/background.jpg` ,那么可以在模板部分这样写入 HTML 标签:
```html
<img src="/images/background.jpg" />
<!-- 注意这里的斜杠表示从域名根部开始计算路径 -->
```
#### 利用环境变量配置不同环境下使用的资源链接
为了适应不同的部署场景(比如开发模式与生产模式),可以通过定义环境变量的方式来动态切换所要引用的静态资源地址前缀。
编辑 `.env.development.local`,`.env.production.local` 等文件设置自定义的基础URL:
```bash
VUE_APP_IMAGE_BASE_URL=/static/
```
之后便可在 JavaScript 逻辑或者样式表单里面安全地拼接完整的资源位置字符串了。
```javascript
const imgUrl = process.env.VUE_APP_IMAGE_BASE_URL + 'icons/icon-192x192.png';
console.log(imgUrl);
```
阅读全文
相关推荐


















