support webp as image banner about react-scroll-parallax HOT 4 CLOSED

@jscottsmith I forgot to wrap the img src as string correctly. All good sorry for the noise and thanks for the excellent component.

from react-scroll-parallax.

@dohomi What browser? Support for WebP is still limited https://caniuse.com/#feat=webp

I'd recommend feature detection and pass the appropriate type of image prop to the component. Not much I can do about this in the component itself I'm afraid.

from react-scroll-parallax.

Hi @jscottsmith
I do webp detection and only in use with ParallaxBanner the image is not being loaded. I use an the image proxy this are the URLs maybe its because of the URL schema?

path-to-img/filters:format(webp)/account.jpg // does not work
path-to-img/account.jpg

Is there maybe an issue of using the filters:format(webp) as a string? Thats the syntax of Storyblok image proxy API.
Thanks for your swift response

from react-scroll-parallax.

Hmm, I'm not totally following.

Is your code publicly accessible? Might help me understand the issue more clearly. Or put together a simple demo that reproduces the issue. Happy to take a look if so.

filters:format(webp) is a transformation expression for Storyblok I guess... What's the output in the browser? Is it adding valid styles to the DOM?

<div class="parallax-banner-layer-1" style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-foreground.png'); background-position: center center; background-size: cover; position: absolute; top: -25%; right: 0px; bottom: -25%; left: 0px;"></div>

from react-scroll-parallax.