我一直困扰着尝试从我的应用程序中引用一个图像。 目录结构是:
的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,这使我高于资产文件夹。因此两个../部分。
我做错了什么?
提前致谢。 瑜珈
答案 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)