Recently, I came across a VueJS template that closely resembles HTML but has the following structure:
<picture>
<source type="image/avif" :scrset="avif" />
<source type="image/webp" :scrset="webp" />
<source type="image/jpg" :scrset="jpg" />
<img class="p-image" :src="fallback" :alt="alt" v-bind="$attrs" />
</picture>
When this code is rendered in Chrome, it appears as shown here: https://i.sstatic.net/zzTBY.png
Upon initial inspection, everything seems accurate. However, there appears to be an issue where it always defaults to using the fallback image named music-768.jpg. Is there something that I am overlooking? My intention is to prioritize the AVIF format where supported, followed by WEBP, and finally JPG.