search

kamsar / Dianoga

An automatic image optimizer for the Sitecore media library.
Other
104 stars 45 forks source link

Images are not rendered in IE and Safari (GraphQL, JSS headless) #73

Closed anamariapopovici88 closed 3 years ago

anamariapopovici88 commented 4 years ago

Version of Dianoga

5.0.1

Environment description

Sitecore 9.2, JSS 13, headless

What configs you have enabled

Dianoga.config Dianoga.DisableForSites.config Dianoga.Jpeg.config Dianoga.Jpeg.Lossy.config Dianoga.Png.config Dianoga.Strategy.MediaCacheAsync.config Dianoga.WebP.config

Issue Description

Images rendered through GraphQL queries are not displayed on browsers that do not support webp format, such as IE and older versions of Safari. This only happens for JSS headless instances.

Reproducible steps (1... 2... 3...) that cause the issue

Upload a jpeg or a png image in Sitecore Render the image in JSS using GraphQL on a headless JSS application, for example: (GraphQL query) logo { ... on ImageField { jss src alt } } (js component) < img className="footer__sites-logo" src={item.logo.src} alt={item.logo.alt} / >

What you expected to see, versus what you actually saw

Expected - All browsers will display the images, IE and older versions of Safari that do not support webp will fallback to the initial image format Actual - Images rendered through GraphQL queries are rendered as webp and they are not displayed correctly in IE and older versions of Safari

markgibbons25 commented 4 years ago

Hi, as we found in #65 for JSS support you need to enable Dianoga.WebP.CDN.config even on local and CM.

anamariapopovici88 commented 4 years ago

Hello @markgibbons25, thank you for your quick reply.

I have seen that suggestion and we have it implemented, I have tried with and without the Dianoga.WebP.CDN.config enabled, and I am getting the same issue - only for IE images that come through GraphQL queries as described above, the other images behave as expected.

markgibbons25 commented 4 years ago

I don't have any experience with JSS, but what needs to be achieved in this case is the request to the page that renders the image url needs to have accept webp header so that when the image url is rendered by GraphQL then the url has the webp query string. Caching could also be playing an issue here - you would need two different caches for whether the Accept webp header is present or not.

anamariapopovici88 commented 4 years ago

Thank you for your suggestions - that was the lead I was taking, so far I think caching might be the cause, but I will investigate further the url sent and debug the code on both JssWebpMediaHandler and MediaRequestHandler. I will update this issue with my findings.