使用 Vue.js 的图像的 URL 路径不正确答案

【问题标题】：Incorrect URL path for images using Vue.js使用 Vue.js 的图像的 URL 路径不正确
【发布时间】：2019-08-06 22:00:48
【问题描述】：

我是 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.：建议编辑标题以便更好地理解问题。

【问题讨论】：

您的资产文件夹在哪里？检查这个cli.vuejs.org/guide/…
@Estradiaz /src/assets
我认为@use .
setItem(i).filePath 来自哪里？在它生成的地方，你import它得到正确的url吗？
没有./assets... 也没有../assets... 工作。 setItem(i).filePath 只是一个带有一些条件（基于当前时间和其他东西）的函数，它返回图像的路径。但是路径应该以某种绑定数据开头（对不起，我不知道如何解释）。

【解决方案1】：

相对路径导入

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

我认为你所要做的就是用./...替换@/...

【讨论】：

这很奇怪 - 因为这些文件不在您的公共域中，它们必须被模块加载？你能试试吗：new Vue({ render: h => h('img', { attrs: { src: require('./assets/images/myimage.svg') } }) }).$mount("#app");