- 首页
- 其他开发
- 如何从 Thymeleaf 中的模型显示字节数组
如何从 Thymeleaf 中的模型显示字节数组
[英] How to display byte array from a model in Thymeleaf
本文介绍了如何从 Thymeleaf 中的模型显示字节数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想显示我的所有产品信息，但我无法显示产品图片.我从 DB 获取我的产品，然后将它们添加到 Model，但不知道为什么只有图像不显示.在 HTML 中，它看起来像这样:
<div class="col-sm-3 my-2 d-flex align-content-stretch flex-wrap" th:each="product : ${products}"><div class="card"><img class="card-img-top" th:src="${product.image}"><div class="card-body"><h5 class="card-title" th:text="${product.name}">产品名称</h5><p class="card-text" th:text="${product.description}">产品概要</p><p class="card-text" th:text="${product.cost}">产品摘要</p>
在控制器中，我添加了这样的所有产品:
@GetMapping("/")公共字符串getHomePage(模型模型){model.addAttribute("products", productRepository.findAll());回家";}
产品型号如图:
@Entity@Getter公共类产品扩展 BaseEntity {私人字符串名称；私人字符串描述；@OneToOne私人类别；私人双倍成本；@高球私有字节[]图像；公共产品(){极好的();}公共产品(字符串名称，字符串描述，类别类别，双倍成本，字节 [] 图像){这个();this.name = 名称；this.description = 描述；this.category = 类别；this.cost = 成本；this.image = 图像；}}
我的问题是我想一次显示多张图片.顺便说一句，我知道 findAll 方法不是一个好的选择，但它仅用于测试建议.后来想实现分页，但是首先怎么显示，一个字节数组图片?
解决方案
我正在回答这个老问题，希望能帮助有相同需求的人.
为了使用字节显示图像，您必须创建一个控制器动作来显示图像:
@GetMapping("/product/image/{id}")public void showProductImage(@PathVariable String idHttpServletResponse 响应)抛出 IOException {response.setContentType("image/jpeg");//或者你想使用的任何格式产品 product = productRepository.findById(id);InputStream is = new ByteArrayInputStream(product.getImage());IOUtils.copy(is, response.getOutputStream());}
因此，您可以简单地显示您的图像:
<div class="col-sm-3 my-2 d-flex align-content-stretch flex-wrap";th:each=产品:${products}"><div class="card"><img class="card-img-top";th:src=@{'product/image/' + @{product.image}}"><div class="card-body"><h5 class="card-title";th:text="${product.name}">产品名称</h5><p class="card-text";th:text="${product.description}">产品摘要</p><p class="card-text";th:text=${product.cost}">产品摘要</p>
PS:你最好使用包装器字节，尽管你的图像属性是字节.这将让您管理无图像(空)的情况
showProductImage 方法的最后一行是将 InputStream 复制到 OutputStream(检查 IOUtils 文档 了解更多详情)
I want to display all my products info, but I have problem with showing a product image. I get my products from DB and then I add them to Model, but don't know why only image don't display. In HTML it looks like this:
<div class="row">
<div class="col-sm-3 my-2 d-flex align-content-stretch flex-wrap" th:each="product : ${products}">
<div class="card">
<img class="card-img-top" th:src="${product.image}">
<div class="card-body">
<h5 class="card-title" th:text="${product.name}">Product name</h5>
<p class="card-text" th:text="${product.description}">Product summary</p>
<p class="card-text" th:text="${product.cost}">Product summary</p>
</div>
</div>
</div>
</div>
In controller I add all the products like this:
@GetMapping("/")
public String getHomePage(Model model) {
model.addAttribute("products", productRepository.findAll());
return "home";
}
And the product model is as shown:
@Entity
@Getter
public class Product extends BaseEntity {
private String name;
private String description;
@OneToOne
private Category category;
private double cost;
@Lob
private byte[] image;
public Product() {
super();
}
public Product(String name, String description, Category category, double cost, byte[] image) {
this();
this.name = name;
this.description = description;
this.category = category;
this.cost = cost;
this.image = image;
}
}
My problem is that I want to display multiple images at one time.
BTW, I know that the findAll method is not a good choose, but It is only for testing proposes. Later I want to implement pagination, but first how to display, a byte array image?
解决方案
I'm answering this old question, in the hope of helping someone with the same need.
In order to show image using bytes, you have to create a controller action with the role of showing the image:
@GetMapping("/product/image/{id}")
public void showProductImage(@PathVariable String id
HttpServletResponse response) throws IOException {
response.setContentType("image/jpeg"); // Or whatever format you wanna use
Product product = productRepository.findById(id);
InputStream is = new ByteArrayInputStream(product.getImage());
IOUtils.copy(is, response.getOutputStream());
}
Thus, you can simply show your image with:
<div class="row">
<div class="col-sm-3 my-2 d-flex align-content-stretch flex-wrap" th:each="product : ${products}">
<div class="card">
<img class="card-img-top" th:src="@{'product/image/' + @{product.image}}">
<div class="card-body">
<h5 class="card-title" th:text="${product.name}">Product name</h5>
<p class="card-text" th:text="${product.description}">Product summary</p>
<p class="card-text" th:text="${product.cost}">Product summary</p>
</div>
</div>
</div>
PS: you better use the wrapper Byte in spite of byte for your image attribute. This will let you manage cases of no image (null)
Edit: The last line of showProductImage method is copying InputStream to OutputStream (check IOUtils doc for more details)
这篇关于如何从 Thymeleaf 中的模型显示字节数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
