如何获取Spring Boot API返回的FileSystemResource类型的图片

解决方案 #

你当前的Controller配置本身是正确的，FileSystemResource搭配MediaType.IMAGE_JPEG_VALUE会自动将图片以二进制流的形式返回，响应头的Content-Type也会被正确设置为image/jpeg，Postman可以正常渲染是因为工具会自动识别该类型并渲染为图片，不同调用端按照二进制流规则处理即可：

1. 网页前端处理 #

• 直接使用场景：无需额外解析，直接将完整接口地址作为<img>标签的src属性值即可，注意path参数需要做URL编码：

<img src="https://你的服务域名/getFotoPerfil?path=上传后存储的路径" alt="用户头像">

• 异步请求场景：使用fetch/axios请求时，必须指定响应类型为blob，避免二进制流被按文本解析出现乱码：

// axios 示例
axios.get('/getFotoPerfil', {
  params: { path: '目标图片路径' },
  responseType: 'blob'
}).then(res => {
  // 生成临时Blob地址赋值给图片
  const tempImgUrl = URL.createObjectURL(res.data)
  document.querySelector('#avatarImg').src = tempImgUrl
  // 页面销毁时调用 URL.revokeObjectURL(tempImgUrl) 释放内存
})

2. 安卓客户端处理 #

• 使用图片加载框架（推荐）：Glide、Picasso等框架会自动识别响应类型并解析流，直接传入完整接口地址即可：

// Glide 4.x 示例
Glide.with(context)
  .load("https://你的服务域名/getFotoPerfil?path=目标图片路径")
  .into(avatarImageView);

• 原生网络请求处理：如果自己实现网络请求，直接将响应的输入流解码为Bitmap即可：

// OkHttp 示例
OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder()
  .url("https://你的服务域名/getFotoPerfil?path=目标图片路径")
  .build();
client.newCall(request).enqueue(new Callback() {
  @Override
  public void onResponse(@NotNull Call call, @NotNull Response response) throws IOException {
    try(InputStream inputStream = response.body().byteStream()) {
      Bitmap avatarBitmap = BitmapFactory.decodeStream(inputStream);
      // 切换到主线程给ImageView设置图片
      runOnUiThread(() -> avatarImageView.setImageBitmap(avatarBitmap));
    }
  }

  @Override
  public void onFailure(@NotNull Call call, @NotNull IOException e) {
    e.printStackTrace();
  }
});

安全优化建议 #

你当前直接接收path参数存在路径遍历漏洞风险，攻击者可传入../开头的路径读取服务器敏感文件，建议做以下优化：

• 对传入的路径做校验，限制只能读取预设的图片存储目录下的文件
• 上传图片时将路径存入数据库，对外仅暴露图片ID，后端根据ID查询对应路径再返回资源

内容的提问来源于stack exchange，提问作者Bocho