通过javascript处理默认配置文件图像的更好方法 var imgRoot='forum/attachments/users/'；

我必须显示用户配置文件图像（不在db中设置），只需简单地上传到预定义的目录，用户名中的空格替换为下划线，例如用户名是“abc”，我们希望图像是abc.png。当用户并没有映像时，问题就会出现，我们必须显示默认映像，如上所示，通过添加onerror事件来加载默认映像

---

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

您可以让web应用程序检查文件系统并查看文件是否存在。不知道你的web应用内置了什么。PHP示例：

---

用JS来做这件事是很麻烦的。它总是尝试加载映像。

如果找不到文件，我会让服务器用http

302

重定向到默认的配置文件映像url进行响应。大多数web服务器无需任何代码，只需一个配置文件即可完成此操作

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

确保安装了mod_rewrite

如果要使用

.htaccess

文件，请确保为目标目录设置了

AllowOverride On

编辑您的

httpd.conf

或

.htaccess

文件

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

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

---

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

您还可以使用Javascript预加载图像。加载图像后，将其附着。如果它失败了，就做些别的事情，比如提供一个后备方案。这里有一个JS代码片段，显示了一个可能的解决方案：

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

使用JavaScript检查这一点遵循尝试和错误的方法。超时也会带来一些延迟。如果您能在服务器端检测到这种情况，那就更好了

请注意，在呈现回退图像后，可能会加载图像。这就是为什么我们存储已附加的回退映像，并在

onload

回调中检查其值

---

我已经准备好了演示如何使用它。

谢谢，php在这里不是一个选项。我正在获得一个带有用户名的json对象，使用该json对象我必须构建配置文件图像URL.htaccess？您使用的web服务器的一些详细信息？在本地主机上，这只是失败，而不是添加，而是添加。如果它能正确地选择url库就太好了。对不起，我直到现在才看到你的评论。它应该重定向到

http://localhost/anonymous.jpg

，除非文件存在。尝试在新文件夹中进行测试，看看是否与您的配置有关。是否可以添加服务器端页面，以检查给定路径是否存在并返回答案？通过这种方式，您可以使用AJAX加载图像。我认为您建议使用src=“profile\u image.php？username”或类似的东西？但是我很好奇如何在js和image node的范围内处理这个问题。对于你的问题，是的，我可以添加一个php页面或调用和ajax请求。是的，这将是一个好方法。您当前的代码是什么样子的？你能把它贴出来让我们看到更大的画面吗？它几乎是js，消耗json数据，上面是单个图像的全部代码。我更好地处理这个服务器端

/**
 * 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');