У меня есть приложение Angular 8, в котором я выполняю рендеринг изображений, но я хочу использовать webp изображения вместо png или Jpg. Но когда я использую несколько источников внутри тега picture, только тег img работает нормально.
как в коде ниже
<picture>
<source class="cardImage" srcset="../../../assets/images/air-bubble-roll.webp" type="image/webp">
<source class="cardImage" srcset="../../../assets/images/air-bubble-roll.png" type="image/png">
<img class="cardImage" src="../../../assets/images/air-bubble-roll.webp" type="image/webp"/>
</picture>
тег img работает и отображает только webp изображение, а в этом коде тег
<picture>
<source class="banner1" srcset="../../assets/images/Banner1.webp" type="image/webp">
<source class="banner1" srcset="../../assets/images/Banner1.png" type="image/png">
<img class="banner1" src="../../assets/images/Banner1.png" />
</picture>
работает и отображает png изображение так что в обоих случаях работает только тег изображения, но мой браузер поддерживает изображения webp. Так что в консоли я получаю эти ошибки
Не удалось выполнить синтаксический анализ значения атрибута 'srcset', так как он имеет неизвестный дескриптор. Отброшен кандидат srcset "../../../assets/images/air"
Я хочу, чтобы мой исходный тег работал вместо одного только тега img