0

enter image description hereI am using angular 6 and i notice that .webp images are not displaying and no problem for jpg,png . How to display webp image in angular 6 ?

It is working in google chrome and not working in mozilla firefox

  • Please add your code or a sample into https://stackblitz.com/ . we need to see you'r code. – Arash Jul 21 '18 at 04:50
  • 1
    This has not so much to do with angular but with browser support for WebP. According to https://caniuse.com/#search=webp firefox does not support it. – Henry Jul 21 '18 at 07:12

2 Answers2

0
<picture>
    <source srcset="test1.webp" type="image/webp">
    <source srcset="test1.jpg" type="image/jpg">
    <img src="test1.jpg" alt="test">
</picture>

Use picture tag to specify a set of fallbacks for less capable browsers. Browsers that don’t support will just display whatever source is specified in the img tag.

ritesh javiya
  • 23
  • 1
  • 9
0

The img tag with the source attribute worked for me. Everything else can be read in the link below.

<img src="img/myAwesomeWebPImage.webp" alt="WebP rules.">

Source: https://css-tricks.com/using-webp-images/

Itchimonji
  • 1
  • 2
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 25 '22 at 10:05