Upload and display images using thymeleaf and springboot - spring-mvc

Question

This is my upload image code in Spring Boot:
String root = ctx.getRealPath("/");
File dir = new File(root + File.separatorChar + "images");
if (!dir.exists())
dir.mkdir();
String path = dir.getAbsolutePath() + File.separatorChar
+ product.getProductName() + "."
+ file.getContentType().split("/")[1];
System.out.println(path);
File file1 = new File(path);
try {
FileOutputStream fod = new FileOutputStream(file1);
fod.write(file.getBytes());
fod.close();
product.setProductPicture("/images/" + product.getProductName()
+ "." + file.getContentType().split("/")[1]);
} catch (IOException e) {
e.printStackTrace();
}
The uploading of files works fine, only problem with this code is that when i use ctx.getRealPath("/") it returns temporary location and when i restart the spring boot app i loose already existing files which was already uploaded as it creates a new temporary directory.
This causes some problem as i also have to display this pics on my site and now it returns "image not found error".
So I needed a solution which will allow me to upload files in a permanent location and serve files from there on the browser.
Note: I'm using thymeleaf for views.

Answer 1

I found a solution for my problem. I created a new function which will only return bytes[] and sent as response body as follows:
#RequestMapping(value = "image/{imageName}")
#ResponseBody
public byte[] getImage(#PathVariable(value = "imageName") String imageName) throws IOException {
File serverFile = new File("/home/user/uploads/" + imageName + ".jpg");
return Files.readAllBytes(serverFile.toPath());
}
And in html <img alt="Image" th:src="#{image/userprofile}" width="250" height="250"/>

Answer 2

Here is how I did it.
Step 1: Create a uploads folder in your project directory.
Step 2: Create ResourceConfig file
#Configuration
public class ResourceConfig implements WebMvcConfigurer {
#Override
public void addResourceHandlers(final ResourceHandlerRegistry registry) {
registry.addResourceHandler("/uploads/**").addResourceLocations("file:uploads/");
}
}
Step 3: Add your html thymleaf
<img th:src="#{'/uploads/' + ${someobject.someAttribute}}"/>

Answer 3

Thanks a lot. I have to do this but with an image storage in my db, as follows:
#GetMapping("/muestra/{idproducto}")
#ResponseBody
public byte[] muestraImagen(Model model,
//id of the product i need to show the picture
#PathVariable("idproducto")Integer idproducto, HttpServletResponse response) {
//object from database
Productos producto = productosRepository.findByIdproducto(idproducto);
logger.info("sal imagen yo te invoco");
//return the attr of my object (blob)
return producto.getArchivo();
}
and in html:
<img alt="Image" th:src="#{/tienda/productos/muestra/{id}(id=${producto.idproducto})}" width="250" height="250"/>