在实际的开发中，常常会遇到关于图片的问题。 如图片显示的问题，然而在显示图片的过程中，常常也会遇到一些问题，如图片不存在，图片引用的路径不匹配等。
如图片在数据库中存储的是: /Image/user/01.jpg, 然而却将这张01图片放置在了/Image/01.jpg 文件夹下，那么这个时候是无法取出显示正确的图片的。
一。常见误区
1.
// 直接设置图片的值 $("#photo").attr("src",user.photo);
如果图片不存在，那么这个时候是不会显示的。
2.
// 先判断，分别设置值 //如果图片存在，设置值 if(user.photo){ $("#photo").attr("src",user.photo); }else{ //如果图片不存在，设置值为null $("#photo").attr("src"," "); }
这个时候，如果图片存在，然而与数据库中的路径不匹配，仍然是错误的。
二. 解决方法(不建议使用的)
在从数据库中取出关于头像的路径时，先判断一下，路径是否存在，如果路径存在，那么就判断一个这个路径是否有相应的图片。 如果有图片，则正常显示，如果没有图片，则显示一个提示图片，如404图片，或者"暂时没有收藏此图片"等提示文字的图片。 这个要用到 JS判断服务器端文件是否存在(三) 这一章的内容。
//如果图片存在，设置值 if(user.photo){ //如果存在此路径，返回true if( isExistFile("/项目名/Image/user", user.photo)){ $("#photo").attr("src","/项目名/Image/user"+user.photo); }else{ //如果不存在的话 $("#photo").attr("src","/项目名/Image/404.jpg"); } }else{ //如果图片不存在，设置值为404图片 $("#photo").attr("src"," ,"/项目名/Image/404.jpg"); }
三.利用Image自带的onerror函数
其实，在 标签中，有一个自带的函数，是JavaScript自己定义的系统函数中，有一个onerror的方法。
其中当图片加载出错时，常常使用的操作有两种，第一，将这个img图片设置成不存在，并不是设置成"" . (谷歌浏览器上设置成"",img是很难看的) 第二，设置一个默认的提示图片显示。 其中加载出错有两种情况，一是图片不存在，二是图片的路径引用的不正确。
四. 设置成图片不存在
<img src="/CorsWeb/User/01.jpg" "imgError(this)"> //在相应的JS中， function imgError(image){ // 原先JS image.style.display="none"; //jQuery设置 $(image).hide(); }
当然，也可以直接设置成jQuery鉴别的模式
<img src="/CorsWeb/Image/user/01.jpg" id="userPhoto" > //在jQuery中 $("#userPhoto").error(function(){ $(this).attr("src","/CorsWeb/Image/404.jpg"); })
五.设置成默认的图片
直接在onError中设置成默认的图片即可
<img src="/CorsWeb/Image/user/01.jpg" width="240px" "javascript:this.src='/CorsWeb/Image/404.jpg' " />
其中，如果设置的404.jpg图片不存在时，会一直进行刷新页面，一直去寻找CorsWeb下的Image文件夹下的404.jpg图片。 这样很不友好。
可以设置一个 this.null
<img src="/CorsWeb/Image/user/01.jpg" width="240px" "javascript:this.src='/CorsWeb/Image/404.jpg' ;this.null " />
如果图片过多的话，可以设置成jQuery鉴别的方式。
<img src="原始图片" "imgError()"> //在JS中设置 function imgError(){ var img=event.srcElement; img.src="默认错误图片"; img.null; }
六. 其他事件
<img> 标签除了有onerror事件之外，还有其他常用的事件，如:
onabort事件: 表示图片正在加载中的事件
<img src="image_w3default.gif" "alert('图片正在加载')" />
onload 事件: 表示图片加载完成后的事件
<img src="image_w3default.gif" "alert('图片加载成功')" />
谢谢!!!
