SpringBoot下图片展示方式

最新推荐文章于 2024-03-13 09:30:19 发布

你狗

最新推荐文章于 2024-03-13 09:30:19 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： java javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/Jode-blog/p/10341966.html

本文介绍两种从byte[]格式数据展示图片的方法：一是转换为Base64字符串并在HTML<img>标签中展示；二是直接通过response输出byte[]数据。文章提供了具体的Java代码示例，包括使用FastDFSClient下载文件并处理的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种将图片byte[]转换成Base64字符串，在<img> src中展示。

　服务端代码示例

@Slf4j
@Controller
@EnableWebMvc
public class ImgViewController {

    @RequestMapping(value = "/imgShow", method = RequestMethod.GET)
    public String imgShow(String imgPath, Model model) {
        try {
            FastDFSClient fdfsClient = new FastDFSClient();
            byte[] bytes = fdfsClient.downloadFile(imgPath);
            String imgStr = Base64.encodeBase64String(bytes);
            String imgData = new StringBuffer("data:image/jpg;base64,").append(imgStr).toString();
            model.addAttribute("imgData", imgData);
            return "imgShow";
        } catch (Exception e) {
            log.error("获取图片异常！{}", e);
            return "fail";
        }
    }
}
页面示例
<html lang="zh-CN">

<head>
<meta http-equiv="Content-Type"    content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
    <div>
        <img src= "${imgData}"/>
 </div>
</body>
</html>

第二种 将图片byte[]直接扔给response.
服务端代码示例

@Slf4j
@RestController
public class ImgViewController {

    @RequestMapping(value = "/imgShow", method = RequestMethod.GET)
    public void imgShow(String imgPath, HttpServletResponse response) {
        try {
           ServletOutputStream out = response.getOutputStream();
　　　　　　 FastDFSClient fdfsClient = new FastDfSClient();
　　　　　　 byte[] bytes = fdfsClient.downloadFile(imgPath);
　　　　　　 out.write(bytes);
　　　　　　 out.flush();
　　　　　　 out.close();
        } catch (Exception e) {
            log.error("获取图片异常！{}", e);
        }
    }
}

转载于:https://www.cnblogs.com/Jode-blog/p/10341966.html