开发工具：idea 2019.3.4
SpringBoot：2.1.12.RELEASE
jdk：1.8
1
2
3

• 1

1.1.处理本地资源数据

1.1.1.直接访问静态资源

当图片固定时，可以通过直接访问静态资源的方式很容易访问图片。

后台资源目录：resources/static/images/12.jpeg

前台访问

<img src="http://localhost:8089/images/12.jpeg">
1

1.1.2.访问非静态资源

以静态资源为例，实际情况可能是从数据库中或者文件服务器中获取，将获取的文件流通过response返回

前台：

<img src="http://localhost:8089/getImage">
1

后台：

@GetMapping("/getImage")
public void getImage(HttpServletResponse response) {
    ClassPathResource resource = new ClassPathResource("wsdlXml/man.jpg");
      InputStream inputStream = resource.getInputStream();
      BufferedInputStream bis = new BufferedInputStream(inputStream);
      BufferedOutputStream bos = new 		BufferedOutputStream(response.getOutputStream());
      int bytesRead;
      byte[] buff = new byte[1024];
      while ((bytesRead = bis.read(buff, 0, buff.length)) != -1) {
        bos.write(buff, 0, bytesRead);
      }
      bos.flush();
      bis.close();
      bos.close();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.2.处理第三方接口返回数据

1.2.1.返回的是Base64编码之后的数据

该种情况可以有两种处理方式，一种是在后台做解密处理，另一种后面Data URIScheme中介绍

解密处理

前台

<img src="http://localhost:8089/getImage">
1

后台

@GetMapping("/getImageDecode")
public void getImageDecode(HttpServletResponse response) throws IOException {
	try {
		//第三方接口返回
		String imageData = "";
           //sun.misc
		BASE64Decoder decoder = new BASE64Decoder();
		byte[] bytes = decoder.decodeBuffer(imageData);
		ServletOutputStream outputStream = response.getOutputStream();
		outputStream.write(bytes);
		outputStream.close();
	} catch (Exception e) {
		log.error(e.getMessage(), e);
		throw e;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1.2.2.返回的是图片流直接转字符串的数据

当返回如下数据时，可以直接在前台获取，不需要从后台处理

7%%77777777777777777777777777777777777777777777777777�� 8�" ��             �� 8    !1AQaq���������"2B#3R$b���            �� !     !1AQ"2��   ? ���%.SF�jr-��Q+��;E�i��$�������l�;�-:�(Q :�tA�"WR��
g?#�߰]L�ŰD!wo[nU���CY	�W����آ��gRt]�2$�"Ҥ�#�
t�]| +����~m� �>���  ��~FD%�C[
A~� %�-����Iu
%�j,�vD[q%?��Ti��&P�󦣉�����	�
1
2
3
4
5

<img src="第三方接口地址">
1

从数据库中读取数据也是这种处理

byte[] image = null;//数据库获取
ServletOutputStream outputStream = response.getOutputStream();
outputStream.write(image);
1
2
3

2.Data URI Scheme：数据URI处理方案

形如下面所示时为Data URI Scheme，其中encode为base加密的文件流，适用数据量小的时候。当使用的使用可以通过ajax等给src动态赋值

<img src="data:image/png;base64,encode">
1

当第三方返回的为encode之后的数据时可以直接使用该种方式，和从本地获取的方式类似，以本地处理为例

@GetMapping("/getImageBase64")
public String getImageBase64() throws IOException {
	try {
		ClassPathResource resource = new ClassPathResource("images/12.jpeg");
		InputStream inputStream = resource.getInputStream();
		BufferedInputStream bis = new BufferedInputStream(inputStream);
		ByteArrayOutputStream bos = new ByteArrayOutputStream();
		int bytesRead;
		byte[] buff = new byte[1024];
		while ((bytesRead = bis.read(buff, 0, buff.length)) != -1) {
			bos.write(buff, 0, bytesRead);
		}
		bos.flush();
		bis.close();
		bos.close();
		//encode处理
		BASE64Encoder base64Encoder = new BASE64Encoder();
		String encode = base64Encoder.encode(bos.toByteArray());
		log.info("imageBase64:{}", encode);
		return encode;
	} catch (Exception e) {
		log.error(e.getMessage(), e);
		throw e;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

总的来说，不论是通过接口调用还是对本地的处理，好用的的方式是对数据流做encode处理，通过response直接输出，前台直接通过src指向后台即可。