Угловой CLI - Как разрешить URL-адрес в CSS или SCSS?

Question

У меня есть компонент, SCSS которого ссылается на изображение в той же папке компонента, используя background-image: url('./logo.jpg').

Снятие ведущего ./ не помогает. В любом случае изображение не отображается в браузере.

Я бегу ng serve и смотрю папку dist, logo.jpg действительно копируется и помещается в ту же папку компонентов, что и ожидалось.

Я также хотел бы иметь возможность ссылаться на изображения из других мест за пределами папки, в которой находится мой .css или .scss-файл, используя относительные пути, как я делаю с моими компонентами .html и .css из файла .ts ,

Мне кажется, мне нужен какой-то URL-адрес, который будет генерировать полный URL-адрес в выведенном файле .css. Как получить такой резольвер и как его настроить в Угловом CLI?

Answer 1

Я заметил подобное поведение.

Кажется, что изображения, на которые ссылаются в CSS в папке «Активы», извлекаются и даются рекомендации, тогда как то же самое не относится к CSS уровня компонентов.

В конце концов я скопировал файл изображения в папке Assets (без привязки его в радиально-cli.json), а затем я был в состоянии ссылаться на него в компоненте CSS с:

фон: URL (активы /img/bgs/footer.png);

Answer 2

Была такая же проблема. Решив его, изменив путь в файле Less/Sass на url(/assets/path_to_img), он должен работать. Не забудьте «/» в начале и поместите свое изображение в папку с ресурсами.

Answer 3

попробуйте использовать это фоновое изображение: url ("./ ~/assets/images/artist-bg.jpg");