Spring: Hiển thị hình ảnh trong thymeleaf từ database

Chào mọi người,
Hiện nay em đang học về Java Spring và cũng đang làm một đồ án nhỏ về Spring Boot+Spring Data+Spring MVC. Hiện giờ em đang muốn hiển thị hình ảnh trên giao diện,nhưng em không biết sao không hiện được.
Đây là code ở trang HTML của em

    <span th:each="room,iterStat : ${room}">
                <div class="col-md-3 md-col">
                    <div class="col-md">
                        <a href="single.html" class="compare-in"><img th:src="@{/static/images/${room.image}}" alt="" />
                        </a>    
                        <div class="top-content">
                            <h5><a href="single.html"><tr th:text="${room.name}"></a></h5>
                            <div class="white">
                                <a th:href="@{/room/{id}/book(id=${room.id})}" class="hvr-shutter-in-vertical hvr-shutter-in-vertical2">BOOK</a>
                                <p class="dollar"><span class="in-dollar">$</span><span>2</span><span>0</span></p>
                                <div class="clearfix"></div>
                            </div>
                        </div>                          
                    </div>
                </div>
                 </span>

Em lưu tên image trong database và lưu hình ảnh ở folder src/main/resources/static/images . Khi mà em thử hiển thị dữ liệu dưới dạng bảng thì thấy nó đã lấy tên của hình ảnh xuống

Nhưng khi đưa vào giao diện web thì nó không hiển thị hình

Em đã thử lấy tên của hình ảnh trong database thay cho ${room.image} thì hình nó hiện ra… Em không biết em làm sai chỗ nào ạ

Config resource có đúng chưa ?

Trong class main extends WebMvcConfigurerAdapter, có thể thêm resource registry để spring boot nó đọc theo path

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/catalogs/**").addResourceLocations("file:resources/catalogs/").setCachePeriod(0);
}

Đoạn code này sẽ add directory resources/catalogs vào path catalogs khi request http. Resources sẽ ngang cấp với src dir khi trong giai đoạn development.

2 Likes

Bạn thiếu dấu +. Sửa lại như sau nhé:

th:src="@{’/images/’ + ${product.image}}"
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?