通过https提供时图像消失

时间:2016-03-04 01:58:44

标签: image http https cloudflare

我刚刚注册了一个cloudflare帐户,并开始强迫所有内容到https只是为了看看它是如何工作的,令我惊讶的是,我的所有图片都拒绝通过https工作。现在这是我不明白的事情,因为资产都通过以下方式联系起来:

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

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

所以我想,我会将其更改为使用//而不是相对路径的绝对网址:

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

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

这也不起作用。所以我决定硬链接到https:

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

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

再次,不工作。发生的事情是图像全部缓冲,一旦完全下载和显示,它们就会突然消失。

所有图片均可通过https或http获取,因此我不明白这里的问题。希望对此有一点了解,以及它是云特定问题还是我编写代码的问题。任何人都可以确认相对路径应该通过当前使用的任何协议调用资产吗?我以前没见过任何问题。

提前致谢

2 个答案:

答案 0 :(得分:1)

Odd problem.

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

In general, there should be no problem to do what you are asking, there's no CloudFlare issue

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

Both of your code examples look good to me, the first perhaps preferable because it will work with both HTTP and HTTPS

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

Have you

  • ruled out browser issues by testing with another browser?
  • cleared the CF cache?
  • tested with CF set to development mode?
  • ruled out any app related issues by testing https image loading on a plain HTML page?
  • tried changing the CF SSL Level (Flexible, Full, Strict)?
  • if still no joy, can you post a URL?

Good luck!

答案 1 :(得分:0)

事实证明这是一个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忽略该特定文件。