Html中img控件的src属性

方式一：

直接给src属性一个服务器端资源的地址，img控件会自动获取并解析资源。

方式二：

当访问的资源不在工程路径下时，想到的办法是通过返回给img控件字节流，让img控件解析，开始直接将ajax异步获取的字节流设给了img的src属性，发现无法显示图片，通过http://blog.csdn.net/doulinxu/article/details/59636710的指点，完成通过给src属性赋予字节数据来显示数据，大致为：字节流先在服务器端进行Base64编码，在输出前需要将MIME的字符串字节输出，代码如下：

@RequestMapping(value="viewDirect")
	public void viewDirect(@RequestParam String url,HttpServletResponse response) throws Exception {
		String filePath = baseDir + "/" + url;
		File file = new File(filePath);
		if (file.exists()&&file.isFile()) {
			String suffix = url.substring(url.lastIndexOf("."), url.length());
			if (suffix==null) {
				return;
			}
			String metaType = "";
			if (suffix.equalsIgnoreCase("jpg")||suffix.equalsIgnoreCase("jpeg")||suffix.equalsIgnoreCase("jpe")) {
				metaType = "data:image/jpeg;base64,";
			}else if (suffix.equalsIgnoreCase("gif")) {
				metaType = "data:image/gif;base64,";
			}else if (suffix.equalsIgnoreCase("bmp")) {
				metaType = "data:image/bmp;base64,";
			}else {
				metaType = "data:image/jpeg;base64,";//默认解码方式，不合适
			}
			
			InputStream inputStream = new FileInputStream(file);
			ServletOutputStream outputStream = response.getOutputStream();
			
//			outputStream.write(metaType.getBytes());
//			int length = -1;
//			byte[] buffer = new byte[1024];
//			while ((length=inputStream.read(buffer, 0, 1024))!=-1) {
//				byte[] buf;
//				if (length<1024) {
//					byte[] remain = new byte[length];
//					System.arraycopy(buffer, 0, remain, 0, length);
//					buf = Base64Utils.encode(remain);
//				}else {
//					buf = Base64Utils.encode(buffer);
//				}
//				outputStream.write(buf);
//			}
			
			
			byte[] bytes = new byte[(int) file.length()];
			inputStream.read(bytes);
			outputStream.write(metaType.getBytes());//这一行代码直接影响是否将接下来的字节解析为图片
			outputStream.write(Base64Utils.encode(bytes));
			
			inputStream.close();
			outputStream.flush();
			outputStream.close();
		}
	}

html代码为：

$.get('${pageContext.request.contextPath }/image/viewDirect',{url:imgs[index]},function(data){
		        	$("#img").attr("src",data);
		        }) 

方式三：

最直接的方法，第二种方法相当于绕了个弯路，其实直接将链接给src属性，即使不是服务器工程下的资源，只要img控件通过这个src指定的链接能够获取到正确的字节流，就可以正确解析图片了。代码如下：

html代码：

$("#img").attr("src",'${pageContext.request.contextPath }/image/viewDirect?url='+imgs[index]);

服务器端代码为：

	@RequestMapping(value="viewDirect")
	public void viewDirect(@RequestParam String url,HttpServletResponse response) throws Exception {
		String filePath = baseDir + "/" + url;
		File file = new File(filePath);
		if (file.exists()&&file.isFile()) {
			InputStream inputStream = new FileInputStream(file);
			ServletOutputStream outputStream = response.getOutputStream();
			//方式一
			int length = -1;
			byte[] buffer = new byte[1024];
			while ((length=inputStream.read(buffer, 0, 1024))!=-1) {
				outputStream.write(buffer,0,length);
			}
			//方式二
//			BufferedImage image = ImageIO.read(file);
//			ImageIO.write(image,"JPEG",response.getOutputStream());
			
			//方式三
//			byte[] bytes = new byte[(int) file.length()];
//			inputStream.read(bytes);
//		//	outputStream.write(metaType.getBytes());//这一行代码直接影响是否将接下来的字节解析为图片
////			outputStream.write(Base64Utils.encode(bytes));
//			outputStream.write(bytes);
			
			inputStream.close();
			outputStream.flush();
			outputStream.close();
		}
	}