使用jquery给加载失败的img元素显示默认图片

在做前端的时候，经常会碰到有图片无法加载的时候，这时候img元素显示的是一个小红叉（也有可能会带上文本-无法显示图片），其实这样的效果看上去很不美观，从用户交互方面来看就是不友好，为了解决这个问题，今天使用了jquery来提供一个解决方案。

假设你已经把图片放在了项目的resources/imgs/no-image.jpg（这张图片作为默认的显示图片），已知img元素在请求图片的时候会发出一个http get请求。在jQuery中，针对http请求，有一个所谓的error事件，error事件在元素发出http请求失败时触发。很简单的一段代码就能解决img元素加载失败显示默认图片的问题。

$(document).ready(function () {//为了保证能在img元素加载之后，才为这些元素设置error事件
$("img").error(function () {
$(this).attr("src", "<%=request.getContextPath()%>/img/no-image.jpg");//JSP页面
});
});这样，就完成了对应的功能了。