复制网站中的图像拒绝加载

Question

我复制了一个网页以获得一些灵感，但是当我在本地计算机上打开它时，图像将无法加载。当我查看Firefox中的Page Inspector并将鼠标悬停在图像源上时，它会在预览窗口中显示图像。图像存储在我的本地计算机上。我也尝试过没有任何JavaScript的页面，但结果保持不变。

有人知道图片拒绝出现的原因吗？

原文：https://www.bol.com/nl/account/login.html

它在我的本地机器上的外观：

图片链接100％正确。

<h2 id="main_logo" class="omniture_main_logo">    
    <img class="print_logo" width="111" height="30" alt="" src="bol.com_files/bolcom_logo.png"></img>
    <a href="http://www.bol.com/nl/index.html">    
        bol.com    
    </a>    
</h2>

Answer 1

您会看到所有图片都有print-logo类。在CSS中，.print-logo具有display: none;样式，这意味着它不会显示在屏幕上，但可能会在打印时显示。

图像实际上是从以下精灵网格中提取的：https://s.s-bol.com/nl/static/images/main/menu_sprite_grid100x50.png

确保在本地文件中，在正确的位置具有此功能。 CSS和sprite实际上位于不同的域：https://s.s-bol.com/nl/static/，只是你知道。

编辑：

background-urls似乎都在CSS文件中链接到index.html的head。我建议将main.2658368274.css（here）文件下载到本地站点的css/dist文件夹中，并将CSS链接更改为：

<link href="/css/dist/main.2658368274.css" rel="stylesheet" type="text/css" media="all">

然后，您可以将精灵地图（here）下载到`images / main'文件夹中。

希望对你有用。

Answer 2

我刚才自己尝试过，似乎这个网站上的很多（如果不是全部）图像都存储为CSS背景图像，而firefox没有下载它们或正确更改路径。例如，usp_banner.gif正在尝试从url("../../images/main/usp_banner.gif")加载，但在使用Firefox“另存为”功能时不存在。