如何为用户正确显示个人资料图片

Question

看来我的 Google-fu 失败了，因为我找不到类似的问题或解决方案。我想在用户个人资料页面中显示用户图像，但图像 eather 不加载或只消耗其他所有内容。

头像是这样保存的：

   @Lob
    @Basic(fetch = FetchType.EAGER)
    private byte[] profilePicture;

这是应该 return 图像的控件。 HttpServeltResponse 是我发现的与此相关的东西，但我让图像占据了整个页面。

    @GetMapping("/profile")
    public String showporfile(Model model, Principal principal, HttpServletResponse response) throws IOException {
        acc = accountRepo.findByUsername(principal.getName());
        model.addAttribute("accountName", acc.getName());
        model.addAttribute("skills", acc.getSkills());
        model.addAttribute("accounts", acc);

        /*response.setContentType("image/jpg");

        InputStream is = new ByteArrayInputStream(acc.getProfilePicture());
        IOUtils.copy(is, response.getOutputStream());*/

        return "profile";
    }

这是我的 HTML，我试图在其中显示图片。目前我收到错误说明：由于被认为是客户端错误的某些事情（例如，格式错误的请求语法、无效的请求消息框架或欺骗性请求路由），服务器无法或不会处理请求。图像现在似乎是：http://localhost:8080/[B@1c535b01 我不知道为什么会这样。

        <div th:each="account : ${accounts}">
            <label th:text="${account.name}"></label>
            <div class="header_image clearfix">
                <img th:src="${account.profilePicture}"/>
            </div>
        </div>

谢谢你的提前我已经坚持了 3 天了。

编辑图像存储到 h2 数据库并链接到用户。

Answer 1

首先要明白的是，img标签的src属性就是图片的URL，并且不是图像本身。鉴于您已经决定将图像存储在数据库中，您需要创建一个单独的端点来获取图像（例如“/profile/avatar”），您实际上 return 图像主体与您在 commented-out 代码中尝试的方式相同。然后您将在 img src.

中引用该端点

顺便说一句，实际上有一种方法可以使用“数据”协议和 base64 编码将图像嵌入 html（here's 其中一个例子），但它只适用于小图像，我相信你会从先学习通常的方法中受益。

如何为用户正确显示个人资料图片

How to properly show profile picutre for user

html

java

spring

h2

spring-boot