Image is displaying on browser but not in reactJS <img>

Question

I have images on a DigitalOcean space, but my problem is that when I want to display the image in reactJS inside a img tag as follow:

const search =
  'https://wantedoffice.dev.bucket.ams3.digitaloceanspaces.com/smartphone.png';
.......
<img height="80px" src={search} />

it doesn't display the image but this:

sometimes it works it's really weird, but I need this to work everytime !

When I copy/paste the image url in a browser it works so I don't understand, you can try to copy/paste this url in your browser https://wantedoffice.dev.bucket.ams3.digitaloceanspaces.com/slide_inspiration.png

Image is well public in DO space and accessible. I think it comes from react and not from Digital Ocean space, Can you help me ..?

Answer 1

This image has an issue from server config so that its not render in your code, for example if you change the url to another server you will see the image result:

              <img src={"https://i.ibb.co/28cc7z4/slide-inspiration.png"} />

This will work, but when I use your image you will receive this error:

  (failed)net::ERR_CERT_COMMON_NAME_INVALID

And this error refer for more than one resone, but base on your link and when I try to visit it via browser, I see an issue on SSL certificate, so that I cant access image else if I press on advance button and click view image...

so what you can do is:

1. Ensure the Domain Has the Correct Certificate Installed
2. Check for Redirects and WWW vs. Non-WWW
3. Check for Misconfigured Redirects