這裡有個需求，我們需要在頁面上顯示一張本地的圖片。看似簡單的需求，卻並不簡單。

也許你百度一下會看到如下的答案：

但是可能你很快會發現，為什麼不管我怎麼嘗試都會不成功呢？

因為前提條件不對。

以上案例成功的前提是這樣的，你必須是一個靜態頁面才有可能對。簡單的說，如果你直接在本地機器上寫一個靜態的HTML檔案，將上面的HTML程式碼複製上去，就會成功。但是，如果你像我一樣，走了後端的請求，還用了模板引擎，這樣寫就不會成功了。（請求會變成ip:port/file:///D:1.jpg，這種請求顯然是訪問不到的)

那麼該怎麼辦呢？

這裡我提供一個思路，當然如果你有更好的辦法，歡迎留言，共同探討。

解決的思路是什麼呢？很簡單，src不僅可以支援檔案路徑，還可以支援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一樣的。