I am using Strapi (self-hosted on my local server with a public IP) along with GraphQL to manage and fetch my media files. The images are accessible and display correctly when I visit the image URL directly in a browser, but they do not show up in Webstudio's image component when fetched using GraphQL.

We’ve been working on a project for a month using the premium version of WebStudio, but we are now stuck with this issue.

I'm using Strapi (self-hosted on my local server with a public IP) along with GraphQL to manage and fetch content. I've successfully fetched and bound text content in WebStudio, but when binding images, they do not render in WebStudio’s Image Component. However, the images are accessible and display correctly when I visit the image URL directly in a browser.

What I've tried so far:

1.Confirmed that the image URLs are publicly accessible.
2.Checked CORS settings in Strapi to allow all origins.
3.Verified that the image URLs returned via GraphQL are correct.
4.Checked our firewall, which allowing all application.