仅在生产模式 MERN Stack ChatApp 中无法加载图像

Question

当我运行由 MERN Stack 技术制作的 Chatapp 时，它在本地运行得很好，但在 onrender 中部署后，我不知道为什么图像没有加载，一些聊天名称列表图像正在加载，但导航栏和聊天框图像没有加载。 请注意，我使用 cloudinary 图像将 url 存储在我的 mongodb 中， 在控制台代码中，图像网址已成功加载，我在下面分享了该屏幕截图，但在网络选项卡中未显示已收到图像请求。请解决问题。

查看我的页面输出

图像已成功加载，为什么在控制台检查代码中显示，但在检查的网络选项卡中未收到。

Answer 1

这很可能是由于混合内容 - 包含图像的页面是通过 HTTPS 加载的，但图像 URL（基于您共享的屏幕截图）试图通过 HTTP 加载，因此，它们被浏览器阻止，因此损坏的图像图标。

值得更新您这边生成图像 URL 的代码，以确保它们使用 HTTPS。

如果您使用 Cloudinary 的 SDK 之一构建图像的 URL，那么您可以在 SDK 的配置对象中包含

secure: true

（与您配置

cloud_name

、

api_key

等的级别相同）并且这将告诉 SDK 使用 HTTPS 生成 URL。