首页vite vue3 引入图片

vite vue3 引入图片

时间: 2025-01-16 11:07:24 浏览: 44

### 如何在 Vite 和 Vue3 项目中引入图片 #### 使用静态资源路径对于大多数情况，在 `public` 文件夹下放置图像文件是一个简单有效的方法。任何放在该目录下的文件都可以通过根 URL 访问[^1]。 ```html <img src="/my-image.png" alt="Descriptive text"> ``` 这里的 `/my-image.png` 是相对于 `public` 文件夹的路径。 #### 导入作为模块另一种方法是在 JavaScript 中导入图片，这使得 Webpack 或者 Vite 能够处理这些资产并返回最终构建中的正确路径： ```javascript import img from './assets/my-image.png'; // 动态加载方式 // or const img = new URL('./assets/my-image.png', import.meta.url).href; // 静态分析URL的方式 ``` 之后可以在模板里使用变量 `img` 来设置 `<img>` 标签的 `src` 属性: ```vue <template> <div> <img :src="img"/> </div> </template> <script setup> import img from './assets/my-image.png'; </script> ``` #### 利用环境变量管理不同环境下使用的图片源为了适应不同的运行环境（开发、生产），可以通过配置 `.env.*` 文件来指定特定于环境的基础 URL 或 CDN 地址[^2]: ```bash # .env.development VITE_IMAGE_BASE_URL=http://localhost:8080/images/ # .env.production VITE_IMAGE_BASE_URL=https://cdn.example.com/assets/ ``` 接着修改组件代码如下所示： ```vue <template> <div> <img :src="`${import.meta.env.VITE_IMAGE_BASE_URL}image-name.png`"/> </div> </template> ``` 这样做的好处是可以轻松切换不同环境下的资源配置而无需更改业务逻辑代码。

阅读全文