So you can do something like this
<img src="data:image/png;base64,${order.getImage()}">
Solution 1 :
Problem :
I want to add a picture to my table. but it does not appear on the page. I don’t get a single error. how can I specify the address of my image field in the index.html ?
the picture is uploaded to the database:
but not visible on page:
index.html
<body>
<div layout_fragment="content" class="py-5">
<div class="container">
<h2 style="text-align: center">Список ваших объявлений</h2>
<div class="col-md-12">
<table class="table">
<thead class="thead-light">
<tr>
<th>ID</th>
<th>Description</th>
<th>Price</th>
<th>Sold</th>
<th>Body</th>
<th>Brand</th>
<th>Engine</th>
<th>Model</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<th:block th_each="order : ${orders}" th_remove="tag">
<tr>
<td th_text="${order.id}"></td>
<td th_text="${order.description}"></td>
<td th_text="${order.price}"></td>
<td th_text="${order.sold}"></td>
<td th_text="${order.body}"></td>
<td th_text="${order.brand}"></td>
<td th_text="${order.engine}"></td>
<td th_text="${order.model}"></td>
<td>
<a href="#" class="thumbnail">
<img th_src="@{/general/{id}/image(id = ${order.getId()})}" th_width="350" th_height="350"/>
</a>
</td>
</tr>
</th:block>
</tbody>
</table>
<p>
<a th_href="@{/general/showFormForAdd}" class="btn btn-outline-info btn-lg my-3">Новое объявление</a>
</p>
</div>
</div>
</div>
</body>
images located in Orders – byte[] image.
code below
@Entity @Table(name = “orders”) public class Orders {
@Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "id") private int id; @Column(name = "description") private String description; @Column(name = "price") private int price; @Column(name = "sold") private boolean sold; @Column(name = "body") private String body; @Column(name = "brand") private String brand; @Column(name = "engine") private String engine; @Column(name = "model") private String model; @Lob @Column(name = "image") private byte[] image; @Column(name = "str") private String imageStr; public Orders() { } public Orders(int id) { this.id = id; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public boolean isSold() { return sold; } public void setSold(boolean sold) { this.sold = sold; } public int getPrice() { return price; } public void setPrice(int price) { this.price = price; } public String getBody() { return body; } public void setBody(String body) { this.body = body; } public String getBrand() { return brand; } public void setBrand(String brand) { this.brand = brand; } public String getEngine() { return engine; } public void setEngine(String engine) { this.engine = engine; } public String getModel() { return model; } public void setModel(String model) { this.model = model; } public byte[] getImage() { return image; } public void setImage(byte[] image) { this.image = image; } public String getImageStr() { return imageStr; } public void setImageStr(String imageStr) { this.imageStr = imageStr; } }
Comments
Comment posted by Alexandru Somai
Where are the images located in your project file structure?
Comment posted by Hardi Shah
Can you share live link?
Comment posted by Hardi Shah
Is the image path correct?
Comment posted by Eshu
Add the java code where you are retrieving the image from db because if you are reading blob then you should be getting binaryStream and you cannot directly assign that to image tag in html
Comment posted by Liuk
You can save in the database the image coded in Base64 to avoid this and other million problems. You know, right? In the db is just a VARCHAR and in html you can use the tag IMG.
Comment posted by Dr.Joe
I added this code but the picture still doesn’t appear on the page
Comment posted by Eshu
create and then use this imageObj in 
Comment posted by Eshu
do one thing try without base64
Comment posted by Dr.Joe
I did it. There is no picture on the page. I think the path to the picture was not found
Comment posted by stackoverflow.com/questions/8499633/…
Look at this answer