Почему не работаю картинки в background-image, в Angular 4?

Question

[Вадим]

Всем доброго времени суток, пытаюсь написать свой шаблон для Angular 2(4), собственно я взял вот этот шаблон и пытаюсь c ним разобраться и что то свое добавить. Столкнулся с проблемой что при добавлении картинки в scss:

background-image: url("../../img/name.png");

то картинка не подгружается и получаю ошибку:
http://localhost:8080/img/name.png 404 (Not Found)

Я думаю это из-за того что в конфиге который обрабатывает scss в компонентах Angular используется raw-loader. Пробовал использовать css-loader но получаю такую ошибку и в head не добавляется тег "style" со стилями компонента, при raw-loader стили добавляются но не работает картинка.

Пробовал запустить шаблон который использую в качестве примера ничего не меняя, только добавив папку с картинками, картинка тоже не грузится.

Подскажите как сделать что бы работало ?

P.S А можно ли весь CSS собирать в отдельный файл, а не добавлять его в тег "style" ? Или Angular всегда добавляет стили туда ?

Answer 1

[Владимир]

Попробуйте в папке assets сделать директорию img и картинки кидать туда а в ссілке указівать не относительній путь а путь от корня /assets/img или без слеша но указать base
https://shekhargulati.com/2017/07/06/angular-4-use...

Comments

[Вадим]

Попробовал как вы сказали, добавил base и создал папку "src/assets/img" скрин, в css указал

h1{
    background-image: url("assets/img/vk.png");
}

но проблема осталась, пробовал без base тоже самое, проверял в шаблоне с которого пишу свой.

[Владимир]

Вадим, У меня в вашем стартере работает такая конструкция

p {
    display: block;
    background-image: url(/img/vk.png);
}

Но я бы пользовался родным angular cli по нему легче помощь найти

[Вадим]

Владимир, у меня это конструкция работает только потому что в app.component.html есть img с картинкой vk.png, которая отробатывает, ну а css естественно подтягивает ее, но если убрать картинку из html и перезапустить сбору, то ошибка остается...

[SerhiDi]

А если необходимо инкапсулировать изображения в папке компонента?
Webpack создает костыли, и даже если вставить картинку в assets, то background-image необходимо прописывать от src/assets - в итоге скомпилированная картинка будет лежать не по нужному пути.
Гуру вебпаков предлагают ипортить изображение в компонет и юзать в html как переменную, или через [ngStyle]. Бред, костыль на костыле.

Answer 2

[SerhiDi]

Есть решение этой проблемы, если кто наткнулся используя конфиг Angular Webpack, или свою сборку `Angular + Webpack + SCSS + TS`.
Вместо `raw-loader` -> css-to-string-loader (можно и другой аналогичный). С `raw-loader` решения не нашел. Если такое известно, напишите, плис.
background-image будет работать в `css` компонента. Но при попытке css (со свойством background-image ) сделать @import в другой css - будет ошибка относительных путей. Нужно добавить resolve-url-loader

{
  test: /(\.css|\.scss)$/, 
  include: [
    helpers.root('src', 'app')
  ],
  use: ['css-to-string-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
}