背景图像不通过 HTTPS 加载答案

【问题标题】：Background Image doesn't load over HTTPS背景图像不通过 HTTPS 加载
【发布时间】：2023-03-16 07:49:01
【问题描述】：

谁能告诉我如何修复 chrome 给我的这个警告？

Mixed Content: The page at 'https://example.com was loaded over HTTPS, but requested an insecure image 'http://support.desk.com/system/site_not_found'. This content should also be served over HTTPS.

在我的 CSS 中，图片是基于文件的

background-image: url("../../../images/checkers.jpg");

当我把它改成

background-image: url("https://example.com/images/checkers.jpg");

什么都没有发生。请看下图：

【问题讨论】：

请仔细阅读错误信息。 http://support.desk.com/system/site_not_found 与 https://example.com/images/checkers.jpg 完全不同。
是的，我遇到这个错误有点奇怪。我到处都找不到http://support.desk.com/system/site_not_found
看看这个警告截图：imgur.com/IoPpHWi 我什至检查了perpect-scrollbar.js，但没有与错误相同的链接。
这是您甚至没有提及的非常重要的信息。请edit the question 并包括：1）完整的错误消息（请以文本形式）2）有关触发它的滚动条插件的详细信息。
要么 (a) 错误消息涉及不同的代码位，要么 (b) URL 正在重定向到错误页面，因为 URL 一开始就是错误的。

标签： html css google-chrome http https

【解决方案1】：

这是由于混合内容检查它为什么会发生以及如何在此处解决： https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content

如果图像文件很小，那么还有另一个技巧，将您的图像转换为 base 64，它会给你简单的文本，用它作为图片的来源

要转换为 base64，您可以使用此站点：https://www.base64-image.de/

然后使用 background-image: url("PasteCompleteBase64TextHere");

【讨论】：

【解决方案2】：

您需要在 http url 中传递图像，因为您的项目是在 http url 上运行的。

为此，通过在浏览器中打开一个新选项卡、在地址栏中输入 URL 并将 https:// 更改为 http:// 来检查 URL 是否可通过 HTTP 使用。如果通过 HTTPS 和 HTTP 显示的资源相同，则一切正常。

【讨论】：