vue3 vite 如何修改图片引用地址？

Question

页面代码中引用本地图片：

<img src="../assets/image/login/icon_login.png" />

页面中的地址：

我想将
/src/assets/image/login/icon_login.png 变成
http://localhost:3000/src/assets/image/login/icon_login.png

应该如何配置？

我配置了vite里的base 没有效果

export default defineConfig(({ command, mode }) => {  return {    base: mode === 'production' ? '/MF_demo/' : 'http://localhost:3000',}})

Answer 1

你试图修改图片的引用地址，从相对路径变为绝对路径。在 Vue3 和 Vite 的项目中，通常在 public 文件夹中放置所有静态资源，例如图片。这些资源可以通过 / 直接访问。

首先，你需要确保图片文件 icon_login.png 确实存在于你的项目的 public 文件夹中。如果文件确实在那里，那么你可以通过以下方式引用图片：

<img src="/icon_login.png" />

注意，这里我们不需要添加任何前缀，如 http://localhost:3000，因为 Vite 会自动根据配置的 base 来设置这些资源的基础路径。

然而，你提到你的配置没有效果。这可能是因为你的配置方式不正确。在 Vite 的配置文件中，base 选项应该设置为一个字符串，而不是一个数组。另外，如果你的 public 文件夹位于项目的根目录下，你不需要添加任何前缀。

以下是一个配置示例：

export default defineConfig({  base: '/MF_demo/', // 这将设置为你的项目的 base 路径})

然后你可以在你的 HTML 文件中这样引用图片：

<img src="/assets/image/login/icon_login.png" />

注意，这里我们仍然使用的是相对路径，但这是因为我们已经设置了正确的 base 路径，Vite 会自动将这个相对路径转换为绝对路径。