Thymeleaf img not calling spring controler - spring

Question

Here is my gradle dependencies:
dependencies {
compile("org.springframework.boot:spring-boot-starter-thymeleaf")
compile("org.springframework.boot:spring-boot-starter-security")
compile("org.springframework:spring-jdbc:4.1.0.RELEASE")
compile("org.springframework.boot:spring-boot-starter-data-jpa")
compile("mysql:mysql-connector-java:5.1.+")
compile("org.webjars:bootstrap:3.0.3")
compile("org.webjars:jquery:2.0.3-1")
compile("org.springframework.security.oauth:spring-security-oauth2:2.0.7.RELEASE")
compile("org.springframework.security:spring-security-test:4.0.0.RELEASE")
compile("org.thymeleaf:thymeleaf-spring4")
compile("nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect")
compile("org.springframework.boot:spring-boot-starter-web")
compile("com.google.code.gson:gson:2.2.4")
compile("javax.mail:mail:1.4.5")
compile("org.springframework:spring-context-support:3.2.2.RELEASE")
compile("org.apache.commons:commons-io:1.3.2")
providedRuntime("org.springframework.boot:spring-boot-starter-tomcat")
testCompile("junit:junit")
}
I have defined a method in my controller:
#ResponseBody
#RequestMapping(value = "/mainMenu/companyOfficeMainMenu/imagetest/{server_image_id}", method = RequestMethod.GET, produces = MediaType.IMAGE_JPEG_VALUE)
public byte[] testphoto(#PathVariable("server_image_id") Long server_image_id) throws IOException {
Image notUpdatedImage = mobileManagment.getImage(server_image_id);
String locationRoot = env.getProperty("location.sever.root");
String locationOfCompanyData = env.getProperty("location.compay.data");
String locationOfImage = env.getProperty("location.compay.media.images");
String storeImageName =
locationOfCompanyData
+ File.separator
+ locationOfImage
+ File.separator
+ notUpdatedImage.getCompany_id()
+ File.separator +
+ notUpdatedImage.getServer_questionnaire_attempt_key()
+ File.separator
+ notUpdatedImage.getImage_name();
File uploadedFile = new File(locationRoot, storeImageName);
InputStream inputStream = new FileInputStream(uploadedFile.getAbsolutePath());
return IOUtils.toByteArray(inputStream);
}
And in Thymeleaf, I try to call it:
<img th:src="#{/mainMenu/companyOfficeMainMenu/imagetest/${object.getServer_image_id()}}" />
I have a break point in the method in the controller but it's not being called.
Here is also another method that does not get called:
#RequestMapping(value = "/mainMenu/companyOfficeMainMenu/image/{server_image_id}", method = RequestMethod.GET)
public ResponseEntity<byte[]> getImage(#PathVariable("server_image_id") Long server_image_id) throws IOException {
Image notUpdatedImage = mobileManagment.getImage(server_image_id);
String locationRoot = env.getProperty("location.sever.root");
String locationOfCompanyData = env.getProperty("location.compay.data");
String locationOfImage = env.getProperty("location.compay.media.images");
String storeImageName =
locationOfCompanyData
+ File.separator
+ locationOfImage
+ File.separator
+ notUpdatedImage.getCompany_id()
+ File.separator +
+ notUpdatedImage.getServer_questionnaire_attempt_key()
+ File.separator
+ notUpdatedImage.getImage_name();
File uploadedFile = new File(locationRoot, storeImageName);
InputStream inputStream = new FileInputStream(uploadedFile.getAbsolutePath());
byte[] imageContent = IOUtils.toByteArray(inputStream);
final HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.IMAGE_PNG);
return new ResponseEntity<byte[]>(imageContent, headers, HttpStatus.OK);
}
#ResponseBody
#RequestMapping(value = "/mainMenu/companyOfficeMainMenu/imagetest/{server_image_id}", method = RequestMethod.GET, produces = MediaType.IMAGE_JPEG_VALUE)
public byte[] testphoto(#PathVariable("server_image_id") Long server_image_id) throws IOException {
Image notUpdatedImage = mobileManagment.getImage(server_image_id);
String locationRoot = env.getProperty("location.sever.root");
String locationOfCompanyData = env.getProperty("location.compay.data");
String locationOfImage = env.getProperty("location.compay.media.images");
String storeImageName =
locationOfCompanyData
+ File.separator
+ locationOfImage
+ File.separator
+ notUpdatedImage.getCompany_id()
+ File.separator +
+ notUpdatedImage.getServer_questionnaire_attempt_key()
+ File.separator
+ notUpdatedImage.getImage_name();
File uploadedFile = new File(locationRoot, storeImageName);
InputStream inputStream = new FileInputStream(uploadedFile.getAbsolutePath());
return IOUtils.toByteArray(inputStream);
}
When I press f12 on the screen I can see the output of the image tag:
<img src="/mainMenu/companyOfficeMainMenu/image/${object.getServer_image_id()}">
That does not look right.
When I output I get 27 (which is correct)
<p th:text="${object.getServer_image_id()}"></p>

Answer 1

You're not using the Thymeleaf Link URL syntax correctly. You need to specify a parameter in braces (similar to the #RequestMapping) eg. {server_image_id}. Then you specify the value to replace it with afterwards between parenthesis (server_image_id=${object.getServer_image_id()}).
All together:
<img th:src="#{/mainMenu/companyOfficeMainMenu/imagetest/{server_image_id}(server_image_id=${object.getServer_image_id()})}" />