通过 https 提供时图像消失

Question

我刚刚注册了一个 cloudflare 帐户并开始强制所有内容都使用 https 只是为了看看它是如何工作的，令我惊讶的是，我所有的图像都拒绝通过 https 工作。现在这是我不明白的事情，因为资产都是 linked via:

HTML:
<img src="./images/image.jpg" />

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

所以我想，我会将其更改为使用带有 // 的绝对 URL 而不是相对路径：

HTML:
<img src="//example.com/images/image.jpg" />

CSS:
background-image: url(//example.com/images/image.jpg);

这也没有用。所以我决定硬 link 到 https:

HTML:
<img src="https://example.com/images/image.jpg" />

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

又一次，不起作用。发生的情况是图像全部缓冲，一旦完全下载并显示，它们就会突然消失。

所有图片都可以通过 https 或 http 获得，所以我不明白这里的问题。希望对此有所了解，无论是 cloudflare 特定问题还是我编写代码的方式的问题。任何人都可以确认相对路径应该通过当前使用的任何协议调用资产吗？我过去没有发现任何问题。

提前致谢

Answer 1

奇怪的问题。

Would appreciate a little insight into this and whether its a cloudflare specific issue

一般来说，按照你的要求做应该没有问题，没有 CloudFlare 问题

or an issue with how I'm writing my code.

我觉得你的两个代码示例都不错，第一个可能更可取，因为它适用于 HTTP 和 HTTPS

<img src="//example.com/images/image.jpg" />

你

通过使用其他浏览器进行测试排除了浏览器问题？
是否清除了 CF 缓存？
使用 CF 设置为开发模式进行测试？
通过在普通 HTML 页面上测试 https 图像加载来排除任何与应用程序相关的问题？
尝试更改 CF SSL 级别（灵活、完整、严格）？
如果还是不开心，可以post一个URL吗？

祝你好运！

Answer 2

事实证明这是 Cloud Flare 问题。他们有一个名为 Rocket Loader 的功能，它将所有 js 文件压缩到一个长的缩小的 JS 文件中，这显然导致我的一个脚本中断，只有在通过 https 提供服务时。它已作为 Cloud Flare 支持的错误提出（因为它在 http 而不是 https 上工作很奇怪）。这个特殊问题与 sss.js（超级简单滑块）有关，Cloud Flare 支持提供的解决方案是将 sss.js 的脚本标签从：

更改为

    <script type="text/javascript" src="js/sss.js"></script>

并添加 data-cfasync="false" 到标签：

    <script type="text/javascript" data-cfasync="false" src="js/sss.js"></script>

显然，这段额外的代码让 Cloud Flare 的 Auto-Minifier 和 Rocket Loader 忽略了那个特定文件。

通过 https 提供时图像消失

Images disappearing when served over https

image

http

https

cloudflare