解决HTML页面显示本地图片的问题(JAVA前后端代码)

本文原创，禁止转载。

这里有个需求，我们需要在页面上显示一张本地的图片。看似简单的需求，却并不简单。

也许你百度一下会看到如下的答案：

比如说这里https://jingyan.baidu.com/article/ca41422f3252571eae99eda2.html

但是可能你很快会发现，为什么不管我怎么尝试都会不成功呢？

因为前提条件不对。

以上案例成功的前提是这样的，你必须是一个静态页面才有可能对。简单的说，如果你直接在本地机器上写一个静态的HTML文件，将上面的HTML代码复制上去，就会成功。但是，如果你像我一样，走了后端的请求，还用了模板引擎，这样写就不会成功了。（请求会变成ip:port/file:///D:1.jpg，这种请求显然是访问不到的)

那么该怎么办呢？

这里我提供一个思路，当然如果你有更好的办法，欢迎留言，共同探讨。

解决的思路是什么呢？很简单，src不仅可以支持文件路径，还可以支持BASE64码，什么是BASE64码呢？

就像这样的。

点击这里，可以实现图片与BASE64转换的页面 。

你可以尝试着把一张图片用上面的链接进行转化，生成的BASE64填写到src里，这样就可以显示出图片了。

显然，我们需要在后端将图片转化成BASE64，那么怎么转化呢？

import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;

import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;

/**
 * 图片与二进制码互转工具类
 * 
 * @author New
 *
 */
public class ImageBinaryUtil {
	private static BASE64Encoder encoder = new sun.misc.BASE64Encoder();
	private static BASE64Decoder decoder = new sun.misc.BASE64Decoder();

	/**
	 * 将图片转换成二进制
	 * 
	 * @return
	 */
	public static String getImageBinary(String filePath) {
		File f = new File(filePath);
		BufferedImage bi;
		try {
			bi = ImageIO.read(f);
			ByteArrayOutputStream baos = new ByteArrayOutputStream();
			ImageIO.write(bi, "jpg", baos);
			byte[] bytes = baos.toByteArray();

			return encoder.encodeBuffer(bytes).trim();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

	/**
	 * 将二进制转换为图片
	 * 
	 * @param base64String
	 */
	public static void base64StringToImage(String base64String, String filePath) {
		try {
			byte[] bytes1 = decoder.decodeBuffer(base64String);

			ByteArrayInputStream bais = new ByteArrayInputStream(bytes1);
			BufferedImage bi1 = ImageIO.read(bais);
			File w2 = new File(filePath);// 可以是jpg,png,gif格式
			ImageIO.write(bi1, "jpg", w2);// 不管输出什么格式图片，此处不需改动
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

用以上的工具类即可互转。

调用getImageBinary()之后，获得BASE64还需要加个头：

这样就可以了，最后生成的数据一定是要和上面的的链接转化的BASE64一样的。

 

找到了新的解决办法，这里附上：

通过修改addResourceHandler和addResourceLocations就可以添加磁盘目录