Java 实现图片链接转 Base64 并在前端显示

工作上有一个需求是将图片链接转换为 Base64 字符串，并在前端页面上显示。

本来图片的链接是 blob storage 上的，直接在前端使用 <img> 标签加载即可。
但是需求是因为图片链接存在泄漏风险，所以需要将解决这个问题。

吐槽一下：

看了一下原来的代码实现，从 blob storage 获取的图片链接已经做了链接过期时间为 5 分钟，也不太明白为什么 5 分钟有效期会存在泄漏风险，而且如果真的有人需要把图片用于其他用途，转换也并没有什么用。 anyway， business is business， so

1. Java 后端实现图片链接转 Base64

1.1 依赖引入

JDK 依赖

1.2 实现一个工具类

import java.io.InputStream;
import java.net.URL;
import java.util.Base64;

public class ImageToBase64 {
    public static String imageUrlToBase64(String imageUrl) throws Exception {
        try (InputStream in = new URL(imageUrl).openStream()) {
            byte[] bytes = in.readAllBytes();
            return Base64.getEncoder().encodeToString(bytes);
        }
    }

    public static void main(String[] args) throws Exception {
        String url = "https://www.example.com/test.png";
        String base64 = imageUrlToBase64(url);
        // 输出前端可用的 Base64 字符串
        System.out.println("data:image/png;base64," + base64);
    }
}

注意：图片类型（如 png、jpg）需根据实际图片类型调整 data URI 前缀。

2. 前端以 Base64 显示图片

假设后端返回的 Base64 字符串为 data:image/png;base64,xxxx...，前端可直接用 <img> 标签展示：

1	<img src="data:image/png;base64,xxxx..." alt="base64图片" />

2.1 前端完整示例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Base64 图片显示</title>
  </head>
  <body>
    <img id="img" src="" alt="base64图片" />
    <script>
      // 假设 base64Str 是后端返回的完整字符串
      var base64Str = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";
      document.getElementById("img").src = base64Str;
    </script>
  </body>
</html>