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="">

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

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

Answer 1

相对路径导入

使用相对值引用静态资产时   JavaScript，CSS或* .vue文件中的路径（必须以。开头），   资产将包含在webpack的依赖图中。在这   编译过程中，所有资产网址（例如，   背景：url（...）和CSS @import被解析为模块   依赖性。

为此，我认为您要做的就是将@/...替换为./...