方式一:
直接给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();
}
}