Store and Display Image in Spring Boot - spring

Question

I am trying to save a logo(in the project not in DB) and fetch it and display it on the JSP page For that I am saving the URL of the image in the DB but when I fetch it I am not getting the Image here is my code and screenshot of the project structure please help me here and please Let me know if this is the correct folder or I should save images somewhere else Thanks.
File Save Method
public static String storeLogoPath(MultipartFile file) {
logger.info("File AAYA HAI " + file);
String path = "";
try {
//String paths = "G:/MainWorkSpace/Picture_testing/WebContent/resources/images/"+file.getOriginalFilename();
path = "G:/MainWorkSpace/TestProjects/ecomProject/src/main/resources/static/img/storeLogo/"+file.getOriginalFilename();
File newFile = new File(path);
newFile.createNewFile();
FileOutputStream myfile = new FileOutputStream(newFile);
myfile.write(file.getBytes());
myfile.close();
logger.info("File should be saved now :: ");
} catch (Exception e) {
e.printStackTrace();
}
return path;
}
Controller Method
#RequestMapping(value = "/storeFormshow" ,method = RequestMethod.GET)
public String addStoreForm(Model theModel) {
Stores storeObj = new Stores();
theModel.addAttribute("storeForm",storeObj);
return "Store/storeForm";
}
JSP PAGE FOR LIST
<%#include file="/WEB-INF/views/Store/StoreTemplet/Header.jsp"%>
<div class="content-wrapper">
<table class="table" id="table_id">
<thead>
<tr>
<th>Logo</th>
<th>ID</th>
<th>Store Name</th>
<th>Country</th>
<th class="text-center">Store Status</th>
</tr>
</thead>
<tbody>
<c:forEach var="store" items="${storeList}">
<tr>
<td> <img src="${store.logoURL}" width="10" height="10"> </td>
<td>${store.id}</td>
<td><a>${store.storeName}</a></td>
<td>${store.country}</td>
<td>${store.storeStatus}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<%#include file="/WEB-INF/views/Store/StoreTemplet/Footer.jsp"%>
Project Structure
The URL returned for the Images
G:/MainWorkSpace/TestProjects/ecomProject/src/main/resources/static/img/storeLogo/Screenshot_2018-07-11-21-46-48.jpg"
Application Properties
spring.mvc.view.prefix: /WEB-INF/views/
spring.mvc.view.suffix: .jsp
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

Answer 1

add your images to resources/static folder and then access them like below in the img tags
<img src="/images/solr.png" height="50" width="50">

Answer 2

public static String storeLogoPath(MultipartFile file) {
logger.info("File AAYA HAI " + file);
String path = "";
try {
path = "G:/MainWorkSpace/TestProjects/ecomProject/src/main/resources/static/img/storeLogo/"+file.getOriginalFilename();
File newFile = new File(path);
newFile.createNewFile();
FileOutputStream myfile = new FileOutputStream(newFile);
myfile.write(file.getBytes());
path ="/img/storeLogo/"+file.getOriginalFilename();
myfile.close();
logger.info("File should be saved now :: ");
} catch (Exception e) {
e.printStackTrace();
}
logger.info("Path Returned is ::: " + path);
return path;
}
I have trimmed the path from the static folder and saved it in the DB
This is not the correct way of doing it but It worked for me

Answer 3

<img src={`http://localhost:8080/api/employees/${employee.id}/image`} style={{'height':'50px','width':'50px'}}></img>
Use above code snippets to get image from server,
You can change url as per your machine