Vue 3 Vite - 实时更新的图片链接

Question

我正在使用 Vue 3 和 Vite。在 Vite 构建生产后，我遇到了动态 img src 的问题。对于静态img src没有问题。

<img src="/src/assets/images/my-image.png" alt="Image" class="logo"/>

它在两种情况下都运行良好：在开发模式下运行时以及在 vite 构建之后。但我有一些图像名称存储在动态加载的数据库中（菜单图标）。在这种情况下，我必须像这样编写路径：

<img :src="'/src/assets/images/' + menuItem.iconSource" />

（menuItem.iconSource 包含图像的名称，如“my-image.png”）。 在这种情况下，它在开发模式下运行应用程序时有效，但在生产构建后无效。当 Vite 为生产环境构建应用程序时，路径会发生更改（所有资源都放入 _assets 文件夹中）。静态图片源是由Vite build处理的，路径也会相应改变，但合成图片源则不然。它只是将 /src/assets/images/ 作为常量并且不会更改它（当应用程序抛出 404 not found for image /src/assets/images/my-image.png 时，我可以在网络监视器中看到它） ）。 我试图找到解决方案，有人建议使用 require() 但我不确定 vite 是否可以使用它。

Answer 1

2022 年更新：Vite 3.0.9 + Vue 3.2.38

动态src绑定的解决方案：

1。使用静态 URL

<script setup>
import imageUrl from '@/assets/images/logo.svg' // => or relative path
</script>

<template>
  <img :src="imageUrl" alt="img" />
</template>

2。使用动态 URL 和相对路径

<script setup>
const imageUrl = new URL(`./dir/${name}.png`, import.meta.url).href
</script>

<template>
  <img :src="imageUrl" alt="img" />
</template>

3.具有动态 URL 和绝对路径

由于汇总限制，所有导入都必须相对于导入文件开始，并且不应以变量开始。

您必须将别名 @/ 替换为 /src

<script setup>
const imageUrl = new URL('/src/assets/images/logo.svg', import.meta.url)
</script>

<template>
  <img :src="imageUrl" alt="img" />
</template>

---

---

2022年答案：Quick 2.8.6 + Vue 3.2.31

以下是对我来说适用于本地和生产构建的方法：

<script setup>
const imageUrl = new URL('./logo.png', import.meta.url).href
</script>

<template>
<img :src="imageUrl" />
</template>

请注意，它不适用于 SSR

---

Vite 文档：新网址