Angular 4+ 背景 css 参考 URL 图像路径

Posted 2023-03-05

【中文标题】Angular 4+ 背景 css 参考 URL 图像路径

【英文标题】：Angular 4+ background css reference URL image path

【发布时间】：2018-07-10 13:17:03

【问题描述】：

我一直被试图从我的应用程序中引用图像所困扰。 目录结构为：

src/app/assets/images/splashImage.png

在这个微不足道的情况下，我试图从以下位置引用它：

src/app/app.component.html

html的第一行：

<div class="splashContainer">

css 文件：

.splashContainer 
background: url("../../assets/images/splashImage.png") no-repeat center center fixed;

构建诊断表明它在 --> 上面的 URL 路径中找不到文件。

我的明显错误的规则是从包含 html 的文件夹开始计数。 app 是 1，src 是 2，这让我在资产文件夹之上。因此这两个 ../ 部分。

我做错了什么？

提前致谢。 修行者

【问题讨论】：

scss文件在哪里？

Scss 与 html 位于同一位置。 :-)

然后尝试 ./assets/images/splashImage.png 作为 background-img 的位置

./src/app/app.component.scss 模块中的错误未找到：错误：无法解析 './assets/Images/SolutionHunter%20Splash%20Image.png' in 'D: \Solution Hunter Engineering\Active Development\Hunter2\src\app'

【参考方案1】：

试试

background: url(assets/images/splashImage.png) no-repeat center center fixed;

【讨论】：

我试过了： background: url("assets/Images/SolutionHunter%20Splash%20Image.png") no-repeat center center fixed;并在 ./src/app/app.component.scss Module not found: Error: Can't resolve './assets/Images/SolutionHunter%20Splash%20Image.png' in 'D:\Solution Hunter Engineering\Active Development\Hunter2\src\app' 使用描述文件解析 './assets/Images/SolutionHunter%20Splash%20Image.png' 在 'D:\Solution Hunter Engineering\Active Development\Hunter2\src\app' 中：D:\Solution Hunter Engineering\Active Development\Hunter2\package.json（相对路径：./src/app）

什么是Solution Hunter after image here？资产/图像/解决方案猎人。图片文件名是 splashImage.png 对吧？

伟大的瑜伽士，你有一个解决方案。但我有一个建议，我认为最好使用没有空格的图像文件名，我从你的回答中了解到你有一个名为“SolutionHunter Splash Image.png”的图像文件，而且它应该可以使用背景：url (assets/images/yourfilename.png)，因为它对我有用。谢谢

【参考方案2】：

不要使用 ../dir 或 ../../dir 之类的路径，因为这样的相对路径很可能会在构建后在服务器中失败。由于 assets/ 文件夹默认在 angular.json 文件中声明。我建议您仅对图像使用内联 css。 例如：

<div class="bg-div" style="background-image: url(assets/images/imageX.png)"></div>

然后继续使用您的 css 文件中的其他 css：即

.bg-div: 
  background-size: cover;
  background-position: center center;
  height: 100%;
  position: relative;

这样，它在开发期间和部署期间都适用于本地构建。您不必在构建期间再次更改路径。

这是如果你有另一个外部 css 文件，除了主要的 angular 的styles.css

【参考方案3】：

感谢您的所有帮助。我想出了答案。 首先：我的路径“公式”是错误的。我应该从包含该文件的文件夹的父级开始计数。所以在这种情况下：app包含html，scss所以我不计算它。但是，它的父 Src 是 1，它在资产之上。所以路径是 ../assets 等 webstorm 对路径感到满意，但对文件名不满意。 所以，我去掉了路径中的 %20 并用空白替换它们。 因此：

background: url("../assets/Images/SolutionHunter Splash Image.png") no-repeat center center fixed;

这行得通。 感谢您的协助。 修行者

【讨论】：

你不应该在文件名中使用空格，它真的会搞砸事情。建议你把图片名改成solutionHunterSplashImage.png

我同意 .. 会的。谢谢。

【参考方案4】：

查看此答案。

详细解释 Angular 在 CSS 文件中的路径解析。

https://***.com/a/65799235/10569886