无法从嵌套组件中的assets文件夹加载图像（Vue.js 2.0 / Webpack）

Question

我是webpack和Vue.js的新手。我试图在嵌套组件中加载图像/视频时遇到问题，它给我“找不到”错误。 我有这样的项目结构：

让我们说在Signup.Vue我想从assets文件夹加载一个图像，我该怎么做？ 因为“ ... / assets / my-img.jpg ”没有成功， “ assets / my-img.jpg ”也不是。在CSS中，我发现使用带有“〜”的require（例如' ~resources / my-img.jpg “）。 我不明白路径是如何运作的。

将我的图像放在同一个组件的文件夹中是一个选项，但我想使用我可以从中获取媒体的主资源文件夹。

使用：webpack 2.7.0 / vue 2.0

提前谢谢

Answer 1

要求使用波浪号（〜），因为在CSS文件中它解析了node_modules目录的路径，而您不必设置相对路径。

在您的情况下，您当前位于注册目录中，因此在到达资产目录之前，您必须先登上3个目录。

所以你的相对路径会变成：

../../../assets/my-img.jpg

使用Webpack，您还可以选择立即解析具有解析别名的目录，这对您来说可能是更漂亮的选择：

https://webpack.js.org/configuration/resolve/

希望有所帮助。

Answer 2

在CSS / SCSS中，如下使用：

background: url(../../../assets/logo.png);