Не удается загрузить фоновое изображение ОШИБКА Непредвиденный символ '�' (1: 0)

Я просто пытаюсь загрузить фоновое изображение в свой проект Angular 4. Путь, который я создал для изображения, - src / assets / images / background.jpeg. До сих пор я использовал angular cli для создания своего проекта, но создал каталог изображений, просто создав каталог в атоме.

Это полная ошибка

ОШИБКА в ./src/assets/images/background.jpeg Ошибка синтаксического анализа модуля: /Users/Joel/web_dev/projects/travel-journal/src/assets/images/background.jpeg Неожиданный символ '�' (1: 0) Вы для работы с этим типом файлов может потребоваться соответствующий загрузчик. (Исходный код для этого двоичного файла опущен)

@ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/styles.css 6: 179-221 @ ./src/styles.css @ multi ./node_modules/leaflet/dist/leaflet.css ./node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css

webpack: не удалось скомпилировать.

Я думаю, что мне нужно где-то в файле указать, что .jpeg является подходящим типом файла, или что мне нужно установить загрузчик изображений, как указано в ошибке.

Я все еще относительно новичок в Angular, поэтому был удивлен, что не нашел никого с похожей проблемой, которая работала бы у меня. Я видел один, в котором говорилось, что убедитесь, что ваши html-комментарии отформатированы правильно, и это так.

src / styles.css

body{
  font-family: 'Jaldi', sans-serif;
  background-image: url('assets/images/background.jpeg');
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Мне не удалось найти файл webpack, иначе я бы опубликовал его. Я исследовал это здесь. Если есть какие-либо другие файлы, которые могут быть полезны для решения этой проблемы в этом проекте Angular, дайте мне знать.


webpack angular image-loading
person joelxbuzzanco    schedule 23.10.2017    source источник
comment
Просто ради аргумента попробуйте случайное изображение с .jpg в качестве расширения файла и посмотрите, работает ли оно.   -  person Huangism    schedule 23.10.2017
comment
Измените на .jpg. Не так давно был другой пост с той же проблемой. Я написал комментарий, поэтому его нелегко найти, но он решил   -  person Vega    schedule 23.10.2017

Ответы (4)


arrow_upward
3
arrow_downward

попробуйте url('/assets/images/background.jpeg');

or url('../images/background.jpeg')

person Kutlu Ozel    schedule 23.10.2017
comment
Ваше первое решение - единственное, что я нашел в Интернете, которое фактически заставляет мой проект перестать выдавать ошибки или предупреждения о путях. Я вам очень благодарен! - person Cristian; 24.02.2018

arrow_upward
2
arrow_downward

У меня была такая же проблема при использовании шаблона VS 2017 Angular и .NET Core: меня чуть не сводило с ума, пока я не наткнулся на этот пост от Стивена Сандерсона (Установить путь к изображению в шаблоне ASP.NET Core + Angular 2 для Visual Studio), который рекомендуется использовать require ( '../assets/images/yourimage.jpg'), например:

constructor() {
        this.images = [
            { "url": require("../../assets/images/image003.jpg"), "title": "Workin on water", "caption": "Sometimes it all just gets wet" },
            { "url": require("../../assets/images/image005.JPG"), "title": "Bus trip", "caption": "people havin fun on a dodgy bus " },

Я попробовал это, и когда я передавал массив изображений, некоторые из моих тестовых изображений имели расширения файлов в заглавных буквах (например, '/yourimage.JPG'), и я заметил, что только они выдают ошибку. Чтобы обойти это, я попытался добавить запись «JPG» в свой webpack.server.js в разделе «модули> правила» следующим образом:

{ test: /\.(png|jpg|JPG|jpeg|gif|svg)$/, use: ['url-loader?limit=25000'] }

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

person Donal    schedule 05.02.2018

arrow_upward
1
arrow_downward

Ошибка сервера для загрузки изображения исчезла, когда я переименовал файл и URL-адрес пути к файлу в styles.css в assets / images / background.jpg из .jpeg.

Я не уверен, почему .jpeg не использовался как изображение изначально с этим расширением; однако .jpg не выдает ошибок.

person joelxbuzzanco    schedule 23.10.2017
comment
Переименование из .jpeg в jpg устраняет проблему. - person Nicholas Murray; 18.03.2019

arrow_upward
0
arrow_downward

Если у вас нет проблем, загрузите его с сервера вместо url ('/ assets / images / background.jpeg');

например url ('https://www.example.com/assets/images/background.jpeg');

Однажды у меня сработало, попробуй.

person Nawin    schedule 04.02.2021