CODEWITHSUNDEEP
javahtmlspringthymeleaf
Dr.Joe
Dr.Joe

Reputation: 73

how to add image on the page

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:

enter image description here

but not visible on page:

enter image description here

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;
} }

Upvotes: 0

Views: 83

Answers (1)

Eshu
Eshu

Reputation: 519

So you can do something like this

<img src="data:image/png;base64,${order.getImage()}">

Upvotes: 1

Related Questions