Vue 3 Vite - 实时更新的图片链接-PHP中文网问答

我正在使用 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 是否可以使用它。