Question

在我的angular 6应用程序中，我的scss文件中包含以下内容：

.pictureplaceholder{
  background-image: url("assets/images/profilepictureplaceholder/PersonPlaceholder.png");
}

这是资源的正确路径。但是我得到了这个错误。

ERROR in ./src/app/venueadmin/parentadminview/venueuserprofile/venueuserprofile.component.scss
(Emitted value instead of an instance of Error) CssSyntaxError: /home/rickus/Documents/softwareProjects/211hospitality/suitsandtables/frontend/fixedsuitsandtables/src/app/venueadmin/parentadminview/venueuserprofile/venueuserprofile.component.scss:11:20: Can't resolve 'assets/images/profilepictureplaceholder/PersonPlaceholder.png' in '/home/rickus/Documents/softwareProjects/211hospitality/suitsandtables/frontend/fixedsuitsandtables/src/app/venueadmin/parentadminview/venueuserprofile'

   9 | 
  10 | .pictureplaceholder{
> 11 |   background-image: url('assets/images/profilepictureplaceholder/PersonPlaceholder.png');
     |                    ^
  12 | }
  13 |

资产文件夹中的其他图像正在工作。很奇怪。有人知道这是什么吗？

Answer 1

明白了。这是相对路径，没有“”

如此

background-image: url(../../../../assets/images/profilepictureplaceholder/PersonPlaceholder.png);

Answer 2

以这种方式使用

$asset-images-path : "assets/images/imagePathHere";
background-image: image-url("#{$asset-images-path}/imageNameWithExtension.png");

Answer 3

在每个URL的开头添加一个/。

background-image: url("/../assets/images/profilepictureplaceholder/PersonPlaceholder.png");

根据您的目录层次结构调整您的相对路径。但是请在开头添加一个斜杠。

有关更多信息，refer

Answer 4

我们可以使用相对路径代替绝对路径：

$assetPath: '~src/assets/images/';
$logo-img: '#{$assetPath}logo.png';
@mixin logo {
  background-image: url(#{$logo-img});
}

.logo {
    max-width: 65px;
    @include logo;
 }

Answer 5

URL可能不正确：

url('/./assets/images/bike.jpg');

Answer 6

我已经尝试了所有上述方法，但这对我有用

#imge6{
    background-image: url("../../../../assets/5.png");
    background-size: cover;
}

也许可以解决别人的问题。

角度6 scss背景图像无法读取

6 个答案: