title: Using a fallback image in angular for webp
body: <pre><code>&lt;img src=${imageUrlWebp} onerror=&quot;this.error=null;this.src=${imageUrl}&quot; width=&quot;700&quot; height=&quot;110&quot;/&gt;
  </code></pre>
  <p>Does this method of using fallback images in angular work in all the browsers.It seems to work in browser but not sure how to check in browsers which don't support webp. I know that they is another method something like this</p>
  <pre><code>&lt;picture&gt;
    &lt;source srcset=&quot;img/awesomeWebPImage.webp&quot; type=&quot;image/webp&quot;&gt;
    &lt;source srcset=&quot;img/creakyOldJPEG.jpg&quot; type=&quot;image/jpeg&quot;&gt; 
    &lt;img src=&quot;img/creakyOldJPEG.jpg&quot; alt=&quot;Alt Text!&quot;&gt;
  &lt;/picture&gt;
  </code></pre>
  <p>But this doesn't seem to work properly as I am appending this snippet to html from a typescript file and always renders the src i give in img tag.</p>
  <p>So can anyone tell if the first method is correct and any pointers on how to check if fallback is working properly in browsers which don't support webp</p>