Closed dohomi closed 5 years ago
@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.
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
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>
@jscottsmith I forgot to wrap the img src as string correctly. All good sorry for the noise and thanks for the excellent component.
Hello,
If layers image consist of a WebP image format they are not been rendered with
ParallaxBanner
. I am not sure if this is actually a feature or bug at the moment. This is an example setup:Best, Dominic