1

Employees should be able to upload their profile picture, and that profile picture should be shown in the employee_info page. I was following this tutorial: https://www.youtube.com/watch?v=-Xf_fbKQit8 Uploading picture is working, but I can't bring image to web page.

My pictures are in a folder outside of Spring Boot project. I've tried this configuration:

How to "display" files from external folder with spring boot 2.1.1

My ConfigMVC class that implements WebMvcConfigurer:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MvcConfig implements WebMvcConfigurer
{
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry)
    {   
        String employeeProfileUploadPath = "file:C:/my_company/profile_pictures/";
        
        registry.addResourceHandler("/images/**").addResourceLocations(employeeProfileUploadPath);
    }

Like in video tutorial, I'm passing URL of image via method in my DTO class for employees:

@Transient
public String getPhotoImagePath()
{
    if(photo == null || nickname == null)
        return null;
    
    return "/my_company/profile_pictures/" + nickname + "/" + photo;
}

In controller I passed object of type EmployeeDTO to Model:

    MyCompanyUserDetails userDetails = (MyCompanyUserDetails)principal;
    int employeeId = userDetails.getEmployeeId();
    Optional<EmployeeDTO> optional = employeeRepository.findById(employeeId);
    EmployeeDTO employeeDTO = optional.get();
    model.addAttribute("employeeDTO", employeeDTO);

And in html with Thymeleaf:

<img th:src="@{${employeeDTO.photoImagePath}}" width = "180" height = "180">

Thymeleaf placed URL:

 http://localhost:8080/my_company/profile_pictures/admin1/admin1.jpg

Which is the right location of my image in my pc. I don't want to store it in ../static/images/** in Spring Boot project, I want this way and I've done MVC configuration as you could see above. I don't see what is the problem, but on Google Chrome console I get 404 error, resource not found.

LosmiNCL
  • 155
  • 3
  • 21

2 Answers2

0

The URL you are using is not correct. The path should be something like:

http://localhost:8080/{appname}/images/admin1/admin1.jpg
Hopey One
  • 1,681
  • 5
  • 10
  • Yes, but I don't know how to include external folder, I tried to do configuration like Dirk Deyne's answer in this topic: https://stackoverflow.com/questions/59289571/how-to-display-files-from-external-folder-with-spring-boot-2-1-1 As I understood, if I do like this (which is similar from youtube video), link will be as you descibred, and picture won't be really in {appname}/images. But it's not working – LosmiNCL Jul 14 '21 at 01:53
  • I'm not sure I understand your comment, have you tried to run your server and browse directly to your image in `C:/my_company/profile_pictures/` with the URL `http://localhost:8080/{appname}/images/admin1/admin1.jpg`? If you can figure out the URL where the server is serving your images, then you can put this in your thymeleaf page. – Hopey One Jul 14 '21 at 03:43
  • Sorry, maybe I was unclear with too much information. Allow me to summarize: 1. images are served from /static/images folder in Spring Boot by deafult (correct me if I'm wrong, I don't have much experience) 2. I want my images to be in a different place, for example C:/my_company/... 3. In order to include that location as well, I tried to configure WebMvcConfigurer interface, just like Dirk Deyne's answer on that post 4. It's not working. What is wrong and what should I do? When I configure it correctly, URL will be fine. – LosmiNCL Jul 15 '21 at 17:25
  • You question says you are generating a URL for images `http://localhost:8080/my_company/profile_pictures/admin1/admin1.jpg`. This doesn't fit with you configuration `registry.addResourceHandler("/images/**")` which as I understand it will serve images at the url beginning with `http://localhost:8080/{appname}/images/...`. Does that make sense? – Hopey One Jul 16 '21 at 02:31
  • Yes, that's what I understood from this solution: https://stackoverflow.com/questions/59289571/how-to-display-files-from-external-folder-with-spring-boot-2-1-1 – LosmiNCL Jul 16 '21 at 03:21
0

Add in your application.properties

spring.resources.static-locations = classpath:/static/,file:///C:/my_company/profile_pictures/

assume your file name is user.jpg into this location C:/my_company/profile_pictures/

so you can access directly by calling http://localhost:8080/user.jpg

finally you can customize your path or URL as you want depending on the base path and directory as well as file name.

R.A.Munna
  • 1,699
  • 1
  • 15
  • 29