Обработка угловых данных

Question

Я использую библиотеку flag-icon-css, и для некоторых флагов размер неверен из-за свойства background-image, которое интерпретируется по-разному. Мне не удалось создать Stackblitz, поэтому вот минимальный шаг для воспроизведения:

ng new bug-so
cd bug-so
npm install flag-icon-css

В angular.json я добавил CSS:

        "styles": [
          "src/styles.css",
          "node_modules/flag-icon-css/css/flag-icon.min.css"
        ],

В app.component.html

<div style="padding: 5em">
  <span class="flag-icon flag-icon-es" style="border: 1px solid black"></span><br/>
  <span class="flag-icon flag-icon-fr" style="border: 1px solid black"></span><br/>
</div>

Запустить приложение

ng serve

Испанский флаг интерпретируется как:

.flag-icon-es {
    background-image: url(es.svg);
}

тогда как французский флаг интерпретируется как:

.flag-icon-fr {
    background-image: url(data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%2…830%22 d%3D%22M426.662 0H640v480H426.662z%22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E);
}

Если фоновое изображение является URL-адресом данных, изображение отображается правильно. Я попытался без угловых, и стили из оригинального файла CSS, и оба флага отображаются правильно:

.flag-icon-fr {
    background-image: url(../flags/4x3/fr.svg);
}

.flag-icon-es {
    background-image: url(../flags/4x3/es.svg);
}

с угловой

без угловых

Answer 1

я не знаю почему, но угловая подача из папки node_modules\flag-icon-css\flags\1x1 и не правильная node_modules\flag-icon-css\flags\4x3

почему второе изображение правильное, но загружено странным образом

это потому, что второй размер меньше 10 КБ, поэтому он будет встроен, а не обслужен отдельно (и по какой-то причине угловым образом вставит правильное изображение)

https://github.com/angular/angular-cli/wiki/build#css-resources

я думаю, вам следует открыть вопрос в угловом репозитории github