Hi @dragonstorm75
What you’re encountering isn’t something that can be fixed by simply whitelisting the domain. The issue here stems from a CORS restriction.
Your site, https://dragonstormstudios.ca, is trying to load an image from https://cdn.shortpixel.ai. Even though ShortPixel is serving an optimized version of your own image, the browser treats these as two different origins. And because cdn.shortpixel.ai isn’t sending the required Access-Control-Allow-Origin header, the browser blocks the image from being displayed due to security restrictions.
The easiest solution is to ensure that the image is served from the same origin as your website. To do this:
- Go to FooGallery → Settings → Images.
- Set the Thumbnail Engine to “Default”.
- Save your changes. Here’s a screenshot for reference: https://prnt.sc/2UK8IEvoEnVf
If you’d prefer to continue using cdn.shortpixel.ai, here are a few things you can explore:
- Option 1: Use a custom CDN domain (CNAME) Check if ShortPixel allows you to set up a custom subdomain like cdn.dragonstormstudios.ca that points to their CDN. This keeps everything under your domain, avoiding cross-origin issues.
- Option 2: Enable CORS headers Ask ShortPixel if they can send the Access-Control-Allow-Origin: https://dragonstormstudios.ca header with their image responses.
- Option 3: Bypass the CDN for specific images If the CDN can’t be configured, you could update the image src to load directly from your server instead of ShortPixel for this specific case. While this bypasses the optimization benefits for that image, it would resolve the CORS issue.
If none of the above works, I’d recommend reaching out to ShortPixel support or checking their documentation for steps on how to set CORS headers or configure your own domain as the image source.
Kind regards,
Elvis
hi @dragonstorm75
Did the issue get resolved when you upgraded to v3.1.1?
Hi @bradvin, oh my gosh the update worked! Yes!
Thank you so so much!!