如何在Thymeleaf中将数据库中的图像插入到页面中

huangapple go评论64阅读模式
英文:

how insert image from db to page in thymeleaf

问题

以下是你要翻译的内容:

"I can't understand how send to browser my image from server. My code down below. Why it doesn't working? When I'm getting bytes from DB and save them to disk image opens fine.

In html there is next code:

<div th:fragment="image_list">
    image will be here
    <p>
        <img class="picture" th:src="@{/image/1}"/>
</div>

Java controller class:

@GetMapping(value = "/{id}")
@ResponseBody
public ResponseEntity<InputStreamResource> getCarImage(@PathVariable Long id) {
    var image = imageService.getOne(id);
        
    var imageDecompressed = decompressBytes(image.getImage());
    InputStream inputStream = new ByteArrayInputStream(imageDecompressed);
    return ResponseEntity.ok()
            .contentLength(image.getImage().length)
            .contentType(MediaType.IMAGE_JPEG)
            .body(new InputStreamResource(inputStream));
}

public static byte[] decompressBytes(byte[] data) {
    Inflater inflater = new Inflater();
    inflater.setInput(data);
    ByteArrayOutputStream outputStream = new ByteArrayOutputStream(data.length);
    byte[] buffer = new byte[1024];
    try {
        while (!inflater.finished()) {
            int count = inflater.inflate(buffer);
            outputStream.write(buffer, 0, count);
        }
        outputStream close();
    } catch (IOException ioe) {
    } catch (DataFormatException e) {
    }
    return outputStream.toByteArray();
}

如何在Thymeleaf中将数据库中的图像插入到页面中

英文:

I can't understand how send to browser my image from server. My code down below. Why it doesn't working? When I'm getting bytes from DB and save them to disk image opens fine.
In html there is next code:

&lt;div th:fragment=&quot;image_list&quot;&gt;
    image will be here
    &lt;p&gt;
        &lt;img class=&quot;picture&quot; th:src=&quot;@{/image/1}&quot;/&gt;
&lt;/div&gt;

Java controller class:

    @GetMapping(value = &quot;/{id}&quot;)
    @ResponseBody
    public ResponseEntity&lt;InputStreamResource&gt; getCarImage(@PathVariable Long id) {
        var image = imageService.getOne(id);
            
        var imageDecompressed = decompressBytes(image.getImage());
        InputStream inputStream = new ByteArrayInputStream(imageDecompressed);
        return ResponseEntity.ok()
                .contentLength(image.getImage().length)
                .contentType(MediaType.IMAGE_JPEG)
                .body(new InputStreamResource(inputStream));
    }



    public static byte[] decompressBytes(byte[] data) {
        Inflater inflater = new Inflater();
        inflater.setInput(data);
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream(data.length);
        byte[] buffer = new byte[1024];
        try {
            while (!inflater.finished()) {
                int count = inflater.inflate(buffer);
                outputStream.write(buffer, 0, count);
            }
            outputStream.close();
        } catch (IOException ioe) {
        } catch (DataFormatException e) {
        }
        return outputStream.toByteArray();
    }

如何在Thymeleaf中将数据库中的图像插入到页面中

答案1

得分: 1

使用此示例

@ResponseBody
@GetMapping(value = "/{id}")
public byte[] getImageAsByteArray(@PathVariable int id) {
    return imageService.getOne(id).getImage();
}
英文:

Using this sample

@ResponseBody
@GetMapping(value = &quot;/{id}&quot;)
public byte[] getImageAsByteArray(@PathVariable int id) {
     return imageService.getOne(id).getImage();
}

huangapple
  • 本文由 发表于 2023年2月18日 20:24:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/75493318.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定