Image图片查找不存在时(六)

在实际的开发中，常常会遇到关于图片的问题。如图片显示的问题，然而在显示图片的过程中，常常也会遇到一些问题，如图片不存在，图片引用的路径不匹配等。
如图片在数据库中存储的是: /Image/user/01.jpg, 然而却将这张01图片放置在了/Image/01.jpg 文件夹下，那么这个时候是无法取出显示正确的图片的。

一。常见误区

// 直接设置图片的值
$("#photo").attr("src",user.photo);

如果图片不存在，那么这个时候是不会显示的。

// 先判断，分别设置值
//如果图片存在，设置值
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"
onabort="alert('图片正在加载')" />

onload 事件: 表示图片加载完成后的事件

<img src="image_w3default.gif"
"alert('图片加载成功')" />

谢谢!!!