Как правильно загружать изображения (и другие ресурсы) в проект Angular 11?

#angular #angular-cli

Вопрос:

После обновления до Angular 11 я столкнулся с некоторыми проблемами, касающимися путей к ресурсам в моем проекте.

Я хочу знать правильный способ добавления ресурсов в угловые проекты.

Это

 src: url('/assets/fonts/NunitoSans-Bold.woff') format('woff');

Или

 src: url('assets/fonts/NunitoSans-Bold.woff') format('woff');

Или

 src: url('../../../../assets/fonts/NunitoSans-Bold.woff') format('woff');

Кроме того, кто-то сказал мне, что если я использую относительный путь (третий), это вызовет проблемы в производственных сборках на сервере. Это правда? и если да, то почему это так?

Более того, можно подумать, что первый и второй примеры на самом деле не отличаются. Это не то, что Angular CLI думает. Иногда он принимает только первый как действительный и выдает следующую ошибку при использовании второго варианта:

 Error: ./src/app/app.component.scss
Module Error (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/styles/kit/_nunitosans.scss:20:2: Can't resolve '../styles/kit/assets/fonts/NunitoSans-Bold.woff' in '/home/newsha/didex/didex-auth-front/src/app'

Моя ОС — Ubuntu 20.04.

1. Newsha, Angular скопируйте папку «assets» в корень вашего проекта (папку, в которой «index.html » создается, поэтому вы не можете использовать ../../.... . Использование /assets/... решений, которые не зависят от вашего «базового href», использование assets/... , делает так, что если вы измените «базовый href» (например, у вас многоязычное приложение, а для испанского языка ваш базовый href — /es-ES угловой, попробуйте найти из этого «href»

Ответ №1:

внутри angular.json у вас есть эта часть конфигурации:

 "assets": [
   "src/assets"
],

При запуске ng build —prod пути, которые вы указали здесь, также будут включены в окончательную сборку, поэтому вы сможете получить к ним доступ на сервере. Вы также можете добавить любые другие папки. Вот почему правильная форма указания на файлы внутри вашего приложения angular использует абсолютный путь, подобный этому: src: url(‘/assets/ fonts/ NunitoSans-Bold.woff’) формат (‘woff’);

1. Я не уверен, что это полностью правильно, потому что при использовании обозначения абсолютного пути /assets/fonts... вы не позволяете браузеру добавлять базовый url. Более подходящим решением было бы использовать assets/fonts...