web-dev-qa-db-ja.com

angular 6scssの背景画像が読み取られていません

私の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 |

アセットフォルダにある他の画像は機能しています。非常に奇妙な。誰もがこれが何であるか知っていますか？

angularimagebackground-imageassets
4
weridpotato

各URLの先頭に/を追加します。

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

ディレクトリ階層に基づいて、相対パスを調整します。ただし、先頭にスラッシュを追加してください。

詳細については 参照

8
leox

とった。 「」のない相対パスでした

そう

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

このように使用する

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