The Strapi and GraphQL Media File Dilemma

most likely you are giving image src the wrong data, not the image url

This is the URL I'm giving and I checked with the browser. http://125.18.230.134:1337/uploads/beautiful_picture_3c619b4bac.jpeg

Error 1016
Ray ID: 918f6e50c0507fe9 • 2025-02-28 09:36:33 UTC
Origin DNS error
What happened?
You've requested a page on a website (125.18.230.134) that is on the Cloudflare network. Cloudflare is currently unable to resolve your requested domain (125.18.230.134).

What can I do?
If you are a visitor of this website:
Please try again in a few minutes.

If you are the owner of this website:
Check your DNS settings. If you are using a CNAME origin record, make sure it is valid and resolvable. Additional troubleshooting information here.

Was this page helpful? Yes No
Thank you for your feedback!
Cloudflare Ray ID: 918f6e50c0507fe9 • Your IP: Click to reveal 125.18.230.134 • Performance & security by Cloudflare

Your api server or hosting is blocking the request. Its not us.

Checked our firewall, which allowing all application.

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.

I have tried opening the image URL in the browser, and it renders correctly. The issue facing in WebStudio’s design stage itself, where the image does not show up in the Image Component. It showing like this.

I'm facing an issue where images from my self-hosted Strapi (with a public IP) via GraphQL are not rendering in WebStudio’s design stage itself. The images are accessible and display correctly when I open the image URL directly in a browser, but they don’t show up in WebStudio’s Image Component.

I suspect that my public IP might be restricted on WebStudio’s side, preventing images from loading. If that’s the case, could you allow access to my public IP?

For reference, here are the image URL and project link:
1.project link: https://p-de5c6c81-b2ca-47bb-80e9-8627d312e49f.apps.webstudio.is/?authToken=27bcf4e0-3479-49a6-847f-de9b58cec81f&mode=design

2.My IP: http://125.18.230.134:1337/

3.image url: http://125.18.230.134:1337/uploads/pexels_photo_346529_c7c3d9d8c8.jpeg

Looking forward to your support. Thanks in advance!