有没有办法告诉浏览器向下查找图像 URL 列表，直到找到一个有效的 URL？纯 HTML 是首选，但我猜这里可能需要 JavaScript（我已经在使用 JQuery，所以这不是问题）。
编辑：感谢您的回答！我将添加一些说明：
【问题讨论】：
这对我来说似乎是个坏主意。此功能的目的是什么？听起来您想要与此等效的东西：
<img src="/images/file1.jpg" src2="/images/file2.jpg" src3="/images/file3.jpg">
浏览器将连续尝试每个文件的位置。这种方法的问题在于它显着增加了所需的 http 流量和延迟。最好的方法是提前使用正确的图像标签动态构建页面。使用服务器端方法，您可以尝试从磁盘（或数据库或图像所在的任何位置）加载图像，并在页面的图像标记中动态包含最佳 url。
如果你坚持做客户端，可以尝试加载多个图片标签：
<img src="file1.jpg" alt="" onerror="this.style.display='none'">
<img src="file2.jpg" alt="" onerror="this.style.display='none'">
<img src="file3.jpg" alt="" onerror="this.style.display='none'">
<img src="file4.jpg" alt="" onerror="this.style.display='none'">
<img src="file5.jpg" alt="" onerror="this.style.display='none'">
<img src="file6.jpg" alt="" onerror="this.style.display='none'">
这将导致页面看起来有很多图像，但在页面加载时它们会消失。需要alt="" 才能使Opera 不显示损坏的图像占位符；对于 Chrome 和 IE，onerror 是必需的。
如果这还不够漂亮，并且如果您的所有图像尺寸相同，并且该尺寸已知，您可以将一堆图像一个一个叠放在另一个之上，这样加载的第一个图像就会隐藏所有其他图像.这在 Opera、FF 和 IE8 中对我有用。它加载列表中存在的最后一个图像。请注意，这会浪费带宽和内存，因为每个图像都会被加载。
<div style="width: 50px; height:38px; background-image: url(file1.jpg);">
<div style="width: 50px; height:38px; background-image: url(file2.jpg);">
<div style="width: 50px; height:38px; background-image: url(file3.jpg);">
<div style="width: 50px; height:38px; background-image: url(file4.jpg);">
<div style="width: 50px; height:38px; background-image: url(file5.jpg);">
<div style="width: 50px; height:38px; background-image: url(file6.jpg);">
<div style="width: 50px; height:38px; background-image: url(file7.jpg);">
</div></div></div></div></div></div>
最后是 JavaScript 方法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var image_array = ['file1.jpg', 'file2.jpg', 'file3.jpg', 'file4.jpg', 'file5.jpg','file6.jpg' ];
function load_img(imgId, image, images, index) {
image.onerror = function() {
load_img(imgId, this, images, index+1);
};
image.onload = function() {
var element = document.getElementById(imgId);
if (element) {
element.src = this.src;
element.style.display = 'block';
}
};
image.src = images[index];
}
</script>
</head>
<body>
<img id="id_1" alt="" style="display: none;">
</body>
<script>
load_img('id_1', new Image(), image_array, 0);
</script>
</html>
【讨论】：
if (index >= images.length) return; 作为load_img(..) 函数的第一行。
如果我正确阅读了规范，您应该可以使用HTML object element 来做到这一点。 <object> 标签可以嵌套，从而提供一系列资源，这些资源依次尝试呈现，失败时用户代理继续下一个。
但请注意，这种行为在多个浏览器和版本中存在/曾经存在错误。
【讨论】：
如果您尝试根据分辨率为图像标签设置多个来源，则 srcset 是您要查找的参数。
<img src="images/space-needle.jpg"
srcset="images/space-needle.jpg 1x, images/space-needle-2x.jpg 2x,
images/space-needle-hd.jpg 3x">
【讨论】：
假设您的意思是浏览器能够使用特定 URL 的 HTTP 响应代码 200 检索某些内容，那么答案是：仅使用 HTML 从客户端不可以。
换句话说，您不能拥有一个元素（例如 img）并指定多个 URL 来“尝试”。
当然，您可以在服务器端制作一些东西：对资源 X 的请求进入，服务器有一个“有效”的 URL 列表。
【讨论】：
INAJNBAM（无论如何我都不是 Javascript Ninja），但是在 伪代码 中，可能在页面加载后尝试这样的操作：（或者，现在我考虑了一下，这也适用于 PHP）
$images = array('img1.jpg', 'img2.jpg', 'img3.png'....)
foreach $images as $img
{if $img.height > 0px
{print "<img src="$img" />"
end}
};;;;
事实上 PHP 会更好，因为我假设在 JS 中这会导致页面加载结束时图像在屏幕上闪烁。在 PHP 中尝试一下，看看这样的东西是否符合您的要求。
注意：我在末尾添加了 4 个分号。我知道 Javascript 总是想要它们，我只是不知道把它们放在哪里。
【讨论】：
如果说“工作”是指可以加载图像，则可以在 jQuery 的图像（在您的情况下是一堆图像）上使用“加载”函数，并在其中声明将被触发的功能图像加载完成后。
如果说“有效”是指 HTTP 状态代码正常，则使用 jquery 进行 ajax 调用。
function getUrlStatus(url) {
$.ajax({
url: url,
complete: function(xhr) {
return xhr.status;
}
});
}
【讨论】：
您可以输入一些服务器端应用程序/脚本的 URL，该应用程序/脚本从它可以找到的任何图像源中提供图像。
您可以在 ASP.Net 中使用发送 content-type=image/jpg 响应的 HTTPHandler 来执行此操作。
除了 ASP.Net，还有很多其他的服务器端选项，例如 Perl、PHP...
【讨论】：