javascript - 使用 Vue.js 的图像的 URL 路径不正确

Question

我是Vue.js的新手，我正在开始一个以不同方式动态加载图像的新项目。

也就是说，我通过运行它npm run dev并在控制台日志中获取那些崩溃的图像图标和以下错误：

GET http://localhost:8080/@/assets/images/myimage.svg 404 (Not Found)

这是我的一段代码，它进入一个循环并使用一个函数，该函数返回一个进入 SVG 的图像路径：

container.insertAdjacentHTML('afterbegin', `<image xlink:href="${setItem(i).filePath}" x="${x}" y="${y}" width="16" height="16"/>`)

我有一些图像也可以加载和不加载返回其路径但不在 SVG 内部的函数：

<image src="${setItem(i).filePath}" alt="">
<image src="@/assets/images/myimage.svg" alt="">

正如我所说，所有图像都已损坏。请问我做错了什么？

PS：随时建议编辑标题以更好地理解问题。

Answer 1

相对路径导入

当您在 JavaScript、CSS 或 *.vue 文件中使用相对路径（必须以 . 开头）引用静态资源时，该资源将包含在 webpack 的依赖关系图中。在这个编译过程中，所有的资源 URL，如 background: url(...) 和 CSS @import 都被解析为模块依赖。

有了这个，我认为您所要做的就是替换@/...为./...

文档