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

时间:2018-01-31 12:17:16

标签: html css angular image background

我一直困扰着尝试从我的应用程序中引用一个图像。 目录结构是:

  

的src /应用程序/资产/图像/ splashImage.png

在这个简单的案例中,我试图引用它:

  

的src /应用程序/ app.component.html

html的第一行:

<div class="splashContainer">

css文件:

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

构建诊断说它找不到文件 - &gt;上面的URL路径。

我明显错误的规则是从包含html的文件夹开始计算。 app为1,src为2,这使我高于资产文件夹。因此两个../部分。

我做错了什么?

提前致谢。 瑜珈

4 个答案:

答案 0 :(得分:4)

尝试

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

答案 1 :(得分:2)

请勿使用../dir或../../dir之类的路径,因为这样的相对路径很可能在构建后在服务器中失败。由于默认情况下在angular.json文件中声明了assets /文件夹。我建议您仅将内联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;
}

这样,它将在开发和部署过程中都适用于本地构建。您无需在构建期间再次更改路径。

这是除主角度的styles.css之外还有另一个外部css文件

答案 2 :(得分:1)

感谢您的帮助。我想出了答案。 第一:我对路径的“公式”是错误的。我应该从包含该文件的文件夹的父级开始计数。所以在这种情况下:app包含html,scss所以我不算数。但是,其母公司Src为1,它高于资产。因此,路径是../assets等,webstorm对路径感到满意,但不满意文件名。 所以,我摆脱了路径中的%20并将其替换为空白。 因此:

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

这很有效。 谢谢你的帮助。 瑜珈

答案 3 :(得分:0)

请参阅此答案。

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

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