图像显示在浏览器上但不显示在 reactJS <img>

问题描述

我在 DigitalOcean 空间上有图像，但我的问题是，当我想在 img 标签内的 reactJS 中显示图像时，如下所示：

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

它不显示图像，但是：

有时它真的很奇怪，但我每次都需要它！

当我在浏览器中复制/粘贴图片网址时它有效，所以我不明白，您可以尝试在浏览器中复制/粘贴此网址 https://wantedoffice.dev.bucket.ams3.digitaloceanspaces.com/slide_inspiration.png

图像在 DO 空间中非常公开且可访问。 我认为它来自 react 而不是来自 Digital Ocean 空间，你能帮我 ..？

解决方法

此图像存在服务器配置问题，因此无法在您的代码中呈现，例如，如果您将 url 更改为另一台服务器，您将看到图像结果：

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

这会起作用，但是当我使用您的图片时，您会收到此错误：

  (failed)net::ERR_CERT_COMMON_NAME_INVALID

此错误涉及多个原因，但根据您的链接，当我尝试通过浏览器访问它时，我发现 SSL 证书存在问题，因此如果我按下高级按钮和点击查看图片...

所以你可以做的是：

1. 确保域安装了正确的证书
2. 检查重定向以及 WWW 与非 WWW
3. 检查错误配置的重定向