I will go straight to the point.
Imagine I have collection like this:
doc1
title: doc1
state: state1
image: binary number...
doc2
title: doc2
state: state2
image: binary number...
Now, its standard to show in HTML title and description like this:
<tr th:each="randomSummerCamps:${randomSummerCamps}">
<div class="title">
<h1>We think this trip best suit you.</h1>
<h1 th:text="${randomSummerCamps.title}"></h1>
<h1 th:text="${randomSummerCamps.state}"></h1>
.....
Of course I have controller for that and that works fine, for each element is different title and state, its good. But problem is when I try to show picture for each element, and what is the problem? One image appear for all elements, instead of showing different images like title and state.
When I add this <h1 th:text="${randomSummerCamps.image}"></h1> program return me different value so for first document is:
title: Kieve Summer Camp
state: Nobleboro, USA
image: org.bson.types.Binary@96e8964c
and for second one is:
title: Raquette Lake Camp
state: New York, USA
image: org.bson.types.Binary@c8dcf05e
You see? Image return value is different, but when I add this to actaully show image:
<img th:if="${randomSummerCamps.image != null}" alt="sample" th:src="*{'data:image/png;base64,'+randomImageSummerCamp}" src=""/>
Image is always same for all elements, both for doc1 and doc2.
I'm here for any other question.
Here is the github link so you can check whole code: