如果找不到图像，则为某些图像显示自定义图像 - Lighttpd答案

【问题标题】：Show a custom image for some images if image not found - Lighttpd如果找不到图像，则为某些图像显示自定义图像 - Lighttpd
【发布时间】：2010-09-20 02:22:07
【问题描述】：

我有一个网站，它会在创建内容后为某些内容创建图像。我试图弄清楚在创建内容和创建图像之间要做什么。我的想法是我可以设置自定义图像以显示在原始图像上的 404 错误。但是，我不确定如何使用 lighttpd 执行此操作。有什么想法或替代方案吗？

编辑：问题是用户不是创建内容的人，它是由一个进程创建的。基本上，我们正在向目录中添加项目，并且我们希望从产品提供商提供的图像中创建标准化的目录图像。但是，我不希望提供商端的慢速服务器减慢新产品的添加速度。因此，一个单独的过程会在以后进行并在可用的情况下创建图像。我想我可以让系统在我们创建产品时创建一个默认图像，然后在我们从提供商提供的图像创建图像时覆盖它。

【问题讨论】：

标签： image http-status-code-404 lighttpd

【解决方案1】：

客户端的另一种选择是：

<img src="/images/generated_image_xyz.png" 
    onerror="this.src='/images/default_image.png'; this.title='Loading...';" />

【讨论】：

【解决方案2】：

在 HTML 中使用 <object> 标记并回退到默认图像。

<P>                 <!-- First, try the Python applet -->
<OBJECT title="The Earth as seen from space" 
        classid="http://www.observer.mars/TheEarth.py">
                    <!-- Else, try the MPEG video -->
  <OBJECT data="TheEarth.mpeg" type="application/mpeg">
                    <!-- Else, try the GIF image -->
    <OBJECT data="TheEarth.gif" type="image/gif">
                    <!-- Else render the text -->
     The <STRONG>Earth</STRONG> as seen from space.
    </OBJECT>
  </OBJECT>
</OBJECT>
</P>

（来自 w3.org 的示例）

【讨论】：

【解决方案3】：

据我了解您的问题：您想在生成真实图像之前显示中间图像？

您可以显示一个正在加载的图像，并在创建时使用 AJAX 将该 DOM 节点更改为真实图像。您可以从头开始编写它或使用任何众所周知且稳定的 AJAX 库，如果您没有自己的偏好，请查看 jQuery。

【讨论】：

【解决方案4】：

进一步到@kentlarsson - 如果你想通过 Javascript 来做，我最近发现了这段代码： http://jquery.com/plugins/project/Preload 和 http://demos.flesler.com/jquery/preload/placeholder/ 的演示按照他的建议进行 - 带有“notFound”选项。

不过，我对 lighttpd 的了解还不够，无法告诉您如何在站点中设置具有一个或多个子目录的自定义图像。

【讨论】：

【解决方案5】：

我认为你可以单独在客户端解决这个问题。

根据 Jaspers 的回答，您可以这样做：

<OBJECT data="/images/generated_image_xyz.png" type="image/png">
     Loading..<blink>.</blink>
</OBJECT>

还可以使用 CSS 对背景进行分层：

<style type="text/css">
    .content_image { width:100px; height: 100px; 
        background: transparent url('/images/default_image.png') no-repeat }
    .content_image div { width:100px; height: 100px; }
</style>

<div class="content_image">
     <div style="background: 
         transparent url('/images/generated_image_xyz.png') no-repeat" />
</div>

后一种解决方案假定您在生成的图像中没有任何透明度。

【讨论】：