Trying to load different format images with the Picture HTML tag

Question

I'm using Vue to generate a dynamic picture component which results in the following code

<picture style="display: contents;">
        <source 
            type="image/avif" 
            sizes="700px" 
            srcset="https://urlStorage/IRememberWater/paris-256.avif 256W,
            https://urlStorage/IRememberWater/paris-512.avif 512W,
            https://urlStorage/IRememberWater/paris-768.avif 768W,
            https://urlStorage/IRememberWater/paris-1024.avif 1024W,
            https://urlStorage/IRememberWater/paris-1280.avif 1280W,
            https://urlStorage/IRememberWater/paris-2160.avif 2160W">
        <source 
            type="image/webp" 
            sizes="700px" 
            srcset="https://urlStorage/IRememberWater/horse-256.webp 256W,
            https://urlStorage/IRememberWater/horse-512.webp 512W,
            https://urlStorage/IRememberWater/horse-768.webp 768W,
            https://urlStorage/IRememberWater/horse-1024.webp 1024W,
            https://urlStorage/IRememberWater/horse-1280.webp 1280W,
            https://urlStorage/IRememberWater/horse-2160.webp 2160W">
        <img src="https://urlStorage/IRememberWater/crew-1024.jpg" alt="Paris" loading="lazy">
    </picture>

I'm generating the srcSet as a computed value based on some passed props The issue i'm having with this is that the default image seems to be loaded all the time(the one specified in the tag src. I've tried loading the generated HTML in a simple index.html file and it still didn't work. I'm going mad trying to figure out what is wrong with the syntax, any help would be appreciated.

Thanks in advance

Answer 1

I found out why it was loading the default always, the capital W after the image size was the issue, substituting it with a minor w solved it.