除非浏览器直接访问和缓存，否则背景图像不会显示答案

【问题标题】：Background image not showing up unless it directly visited and cached by the browser除非浏览器直接访问和缓存，否则背景图像不会显示
【发布时间】：2017-06-14 11:30:43
【问题描述】：

我对特定图片 URL 有一个奇怪的问题。

首先请visit this page 使用您的干净缓存（无论如何，这是一个正在开发中的土耳其语 Reddit 克隆...）

所以，缩略图没有显示对吗？什么都没有，只是空格对吗？我的意思是没有缩略图unlike this page 对吗？

这是我们加载缩略图的方式：

<div class="link-thumbnail" style="background-image: url('http://www.herkesebilimteknoloji.com/wp-content/uploads/2017/01/dunya.png');"></div>

现在请用您的浏览器visit the image directly 和return back 到有问题的页面。这次的图片出现对了吗？

最终我的结论是；除非浏览器直接访问和缓存背景图像，否则不会显示背景图像。

那么这背后的机制/原因是什么？正如您通过查看 URL 所想象的那样，图像的主机是一个 WordPress 站点。那么阻止background-image: url('...') 加载此图像的技巧可能是什么？顺便说一句，它使用<img> 标签完美加载图像。

我知道一些壁纸网站会使用类似的技巧，但没有一个网站会在不使用重定向技巧的情况下直接赠送图片。我相信这个案例并不相似。

最后但同样重要的是；使用background-image时如何处理这种情况？

【问题讨论】：

标签： html css wordpress background-image

【解决方案1】：

您正在从不同的 URL / wordpress 系统加载此图像。似乎 Wordpress 本身会阻止其“文件系统”中的图像作为背景图像从其他 URL 加载。

但是您可以保存该图像，将其放在您自己的网站上并从那里加载。

【讨论】：

但我不想将图像保存到我的服务器中。 WordPress 如何将请求识别为background-image？我的意思是<img> 工作。 WordPress如何区分这一点？最重要的是如何以编程方式检测服务器/客户端的这种情况，以便我可以替换 URL。
也许您的服务器拒绝从其他域加载背景图片？在服务器上保存该图像有什么不好？
这类网站的内容基本上都是链接。如果缩略图损坏，则 URL 损坏。如果 URL 被破坏，那有什么意义 :) 我还计划将缩略图图像大小增加到最小 200x200。我没有钱购买存储大量 200x200 图像的服务器。 background-image 在客户端而不是服务器端加载 url。我觉得你很困惑。