generate fallback images

[hdwebpros]

I'm trying https://image.nuxtjs.org/nuxt-picture but my results aren't matching the documentation.

The documentation says:

When you use modern formats like webp in the component, a fallback image with jpeg format will be generated and used as a fallback image for old browsers.

Therefore, I to use it as the docs suggested:

            <nuxt-picture
              :src="imgUrl(webpimage)"
              sizes="300 (webp),300:600 (jpeg),600:900"
            />

(the function just places in a webp image)

An example of the resulting HTML is something like:

<picture>
<source srcset="/_image/ipx/remote/_/w_900_cover/http://localhost/hdwp-content/user/pages/01.home/wolves.webp" media="(min-width: 600px)">
<source srcset="/_image/ipx/remote/jpeg/w_600_cover/http://localhost/hdwp-content/user/pages/01.home/wolves.webp" type="jpeg" media="(min-width: 300px)">
<source srcset="/_image/ipx/remote/webp/w_300_cover/http://localhost/hdwp-content/user/pages/01.home/wolves.webp" type="webp" media="">
<img alt="wolves" class="__nim_o" style="position: absolute; left: 0px; top: 0px; margin: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: opacity 800ms ease 0ms; opacity: 1;" src="/_image/ipx/remote/jpeg/w_300_cover/http://localhost/hdwp-content/user/pages/01.home/wolves.webp">
</picture>

I tested the output in Safari 13 (Catalina) and nothing showed -- meaning that the JPG fallback wasn't generated. I tried PNG as well with no luck.

Am I implementing it wrong? Is the output HTML wrong?

[Dawieking1]

I think it might have to do with the output HTML showing type="jpeg" and type="webp" instead of type="image/jpeg" and type="image/webp".

[hdwebpros]

I just tried to inline that, just for testing, and that still doesn't show on Safari 13

https://nimb.ws/H7RgnA

Reference code:

            <picture
              style="width: 20rem; height: 20rem; display: block; position: relative;"
            >
              <source
                srcset="/_image/ipx/remote/_/w_900_cover/http://localhost/hdwp-content/user/pages/01.home/wolves.webp"
              />
              <source
                srcset="/_image/ipx/remote/jpeg/w_600_cover/http://localhost/hdwp-content/user/pages/01.home/wolves.webp"
                type="image/jpeg"
              />
              <source
                srcset="/_image/ipx/remote/webp/w_300_cover/http://localhost/hdwp-content/user/pages/01.home/wolves.webp"
                type="image/webp"
              />
              <img
                alt="wolves"
                class="__nim_o"
                style="position: absolute; left: 0px; top: 0px; margin: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: opacity 800ms ease 0ms; opacity: 1;"
                src="/_image/ipx/remote/jpeg/w_300_cover/http://localhost/hdwp-content/user/pages/01.home/wolves.webp"
              />
            </picture>

[larxn]

I think this is no longer an issue. I just tested <nuxt-picture> in both Safari 12 and IE 11, via LambdaTest. They work as expected, using a fallback JPG.