Задать вопрос
@Darseed
javascript

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

Всем доброго времени суток, пытаюсь написать свой шаблон для 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 всегда добавляет стили туда ?
  • Вопрос задан
  • 2554 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
Casufi
@Casufi
Попробуйте в папке assets сделать директорию img и картинки кидать туда а в ссілке указівать не относительній путь а путь от корня /assets/img или без слеша но указать base
https://shekhargulati.com/2017/07/06/angular-4-use...
Ответ написан
4 комментария
4 комментария
@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']
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Доработать и интегрировать модуль на WordPress
26 апр. 2024, в 19:53
5000 руб./за проект
Ещё заказы