Jquery 优雅地处理可能不再存在的远程图像的显示

我正在我的服务上显示远程图像

<img src="http://remote-site.com/imageX">

然而，有时图像已经消失了，所以我会得到404或只是一个纯文本

问题是->当我得到一些非图像类型的东西时，我如何能降级为通用图像

---

实际代码，无论是jQuery、Ruby等都非常感谢

由于任何原因（连接错误、HTTP 404、非图像数据等）无法加载图像时，将触发

错误

事件。一个非常简单的内联示例是

<img src="http://example.com/image.jpg" onerror="this.src = 'generic-image.png';" />

---

当由于任何原因（连接错误、HTTP 404、非图像数据等）无法加载图像时，将触发

错误

事件。一个非常简单的内联示例是

<img src="http://example.com/image.jpg" onerror="this.src = 'generic-image.png';" />

---

如果您编写PHP，您可以使用：

<?= (file_exists('http://remote-site.com/imageX'))?'<img src="http://remote-site.com/imageX">':'<img src="http://remote-site.com/genericImage.png">' ?>

这将检查图像是否存在，并显示您创建的通用图像，如果不存在，则在某个位置托管

我将其用于应用程序中的用户图像。如果他们没有上传图像，则会显示通用图像

---

这些图像是否来自数据库？

如果您编写PHP，您可以使用：

<?= (file_exists('http://remote-site.com/imageX'))?'<img src="http://remote-site.com/imageX">':'<img src="http://remote-site.com/genericImage.png">' ?>

这将检查图像是否存在，并显示您创建的通用图像，如果不存在，则在某个位置托管

我将其用于应用程序中的用户图像。如果他们没有上传图像，则会显示通用图像

---

这些图像是否来自数据库？

这看起来是一个很好的解决方案！我正在使用jQuery（“img”）.bind（“error”，function（）{alert（）；}）进行测试；但这一事件似乎并未触发。我可能做错了什么？@ming-yeow:图像可能在你的事件附加之前加载。也许使用内联方法（或者用JS设置src属性）会更好！但是，在任何需要它的地方写下它，真的很痛苦（也很混乱！）。我想知道是否有一种方法可以在加载前连接，比如live？这看起来是一个很好的解决方案！我正在使用jQuery（“img”）.bind（“error”，function（）{alert（）；}）进行测试；但这一事件似乎并未触发。我可能做错了什么？@ming-yeow:图像可能在你的事件附加之前加载。也许使用内联方法（或者用JS设置src属性）会更好！但是，在任何需要它的地方写下它，真的很痛苦（也很混乱！）。我想知道是否有一种方法可以在加载前连接，比如live？这也是一个好主意。但这会不会是两次尝试检索图像->一次检查，一次加载？好问题，但不是，它实际上并没有尝试加载或检索图像，只是检查图像是否存在。类似于命令行“dir”命令，该命令仅列出文件和文件夹，但实际上不处理它们。如果您担心的话，性能损失可以忽略不计：）嗯，我没有将映像存储在数据库中-它是远程的，所以它会影响远程服务器两次吗？一个要检查，一个要加载是的，它确实会击中远程服务器两次，但实际上它不会尝试加载任何东西。我假设这些图像是由其他人托管的。此外，由于PHP是在服务器端呈现的，因此如果文件不在那里，则甚至不会尝试加载，这与列出的jQuery方法相反，jQuery方法会尝试加载，然后报告错误……这反过来必须捕获并处理。此外，这是一个更简洁。最后，马蒂的回答是有效的，差别可能很小：）这也是一个好主意。但这会不会是两次尝试检索图像->一次检查，一次加载？好问题，但不是，它实际上并没有尝试加载或检索图像，只是检查图像是否存在。类似于命令行“dir”命令，该命令仅列出文件和文件夹，但实际上不处理它们。如果您担心的话，性能损失可以忽略不计：）嗯，我没有将映像存储在数据库中-它是远程的，所以它会影响远程服务器两次吗？一个要检查，一个要加载是的，它确实会击中远程服务器两次，但实际上它不会尝试加载任何东西。我假设这些图像是由其他人托管的。此外，由于PHP是在服务器端呈现的，因此如果文件不在那里，则甚至不会尝试加载，这与列出的jQuery方法相反，jQuery方法会尝试加载，然后报告错误……这反过来必须捕获并处理。此外，这是一个更简洁。最后，马蒂的回答是有效的，差别可能很小：）