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

Posted 2023-02-22

【中文标题】无法从嵌套组件中的资产文件夹加载图像（Vue.js 2.0 / Webpack）

【英文标题】：Can't load images from assets folder in nested components (Vue.js 2.0 / Webpack)

【发布时间】：2018-01-23 11:14:02

【问题描述】：

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

假设在 Signup.Vue 中我想从资产文件夹加载图像，我该怎么做？ 因为“.../assets/my-img.jpg”没有成功， “assets/my-img.jpg”都不是。在 css 中，我发现将 require 与 "~" 一起使用是有效的（例如 '~assets/my-img.jpg" ）。 我不明白路径是如何工作的。

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

使用：webpack 2.7.0 / vue 2.0

提前谢谢你

【参考方案1】：

带有波浪号(~) 的require 有效，因为在CSS 文件中，它解析了node_modules 目录的路径，而您不必设置相对路径。

在您的情况下，您当前位于 signup 目录中，因此您必须在到达 assets 目录之前向上 3 个目录。

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

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

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

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

希望对您有所帮助。

【参考方案2】：

在 CSS/SCSS 中使用如下：

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