1 
var imgRoot='forum/attachments/users/';

<img 
 src="../employees/attachments/users/username_xyz.png" 
 onerror='this.src=imgRoot+"no_profile_pic.png" '
/>

我必须显示用户个人资料图像（未在 db 中设置），只需简单地上传到预定义的目录，用户名中的空格替换为下划线，例如用户名是 'AB C'，我们期望图像 A_B_C.png。当用户没有图像时会出现问题，我们必须显示默认图像，如上所示，通过添加 onerror 事件来加载默认图像。

有没有更好的方法来处理这个？我们事先不知道用户是否上传了个人资料图片。另一个烦恼是，firebug 在加载回退默认配置文件图像之前没有找到用户配置文件图像时会报告网络错误。

4

3 回答 3

1

302当找不到文件时，我会让服务器响应一个 http重定向到默认的配置文件图像 url。大多数 Web 服务器无需任何代码就可以做到这一点，只需一个配置文件。

编辑：由于您使用的是 Apache，因此您需要执行以下操作：

  1. 确保安装了 mod_rewrite。
  2. 如果要使用.htaccess文件，请确保AllowOverride On为目标目录设置。

  3. 编辑您的httpd.conf或.htaccess文件。

    RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^.*$ /anonymous.jpg [L,R=302]

Apache 配置有很多怪癖，因此您的配置可能必须略有不同。

于 2013-09-17T08:31:22.887 回答
1

您还可以使用 Javascript 预加载图像。当图像加载时，附加它。如果失败，请执行其他操作，例如提供后备选项。在这里，您有一个显示可能解决方案的 JS 代码片段：

/**
 * Tries to load an image and renders a fallback image if it fails.
 * @param {string} srcImage The source of the image to load.
 * @param {string} srcFallback The source of the fallback image.
 */
function loadImageOrFallback(srcImage, srcFallback) {
  var image = new Image(),
      timerFallback = null,
      hasRenderedFallbackImage = false;

  image.onload = function() {
    if (timerFallback !== null) {
      clear(timerFallback);
    }

    if (hasRenderedFallbackImage) {
       // replace the fallback image
    } else {
      // append image to wherever you want
    }
  };

  image.src = srcImage;

  // since there is no way to detect an error when preloading the image,
  // you can use a timeout function (here we are waiting 2 seconds)

  timerFallback = setTimeout(function() {
    var fallbackImage = new Image();
    fallbackImage.src = srcFallback;

    // append fallbackImage to wherever you want

    hasRenderedFallbackImage = true;

  }, 2000);
}

loadImageOrFallback('A_B_C.png', 'fallback.png');

使用 JavaScript 进行检查遵循试错法。超时也引入了一些延迟。如果您可以在服务器端检测到这种情况，那就更好了。

请注意，在渲染后备图像后可能会加载图像。这就是我们存储已附加后备图像并在onload回调中检查其值的原因。

我准备了这个 jsFiddle来展示你将如何使用它。

于 2013-09-17T08:42:37.590 回答
0

您可以让 Web 应用程序检查文件系统并查看文件是否存在。不知道您的网络应用程序是内置的。PHP 示例：http ://www.php.net/manual/en/function.file-exists.php

在 JS 中做这件事是 hacky。它总是会尝试加载图像。

于 2013-09-17T08:26:03.883 回答