how to retrieve images from server using spring boot and reactjs

Question

I am using spring boot as backend and reactjs as frontend. I stored images and videos on server. then retrieve it to front end. when using localhost it works properly. but after i deployed this application on ubuntu server i can't preview images.(but image save process success). In ubuntu my spring boot jar file is located at /root/main/test. But uploaded images saved outside root folder(/upload/image.jpg). so i can't retrive this as full url. such as mydomain.com/upload/image.jpg isn't working. how can i get this image using react js

It's strictly your backend's issue. How are you trying to get the images in Spring? (I mean show some code) — k-wasilewski
To serve a file you need a server like nginx or apache installed — Aman
@k-wasilewski String[] split = filename.split("primages/"); String fileurl = split[1]; Path file = userroot.resolve(fileurl); Resource resource = new UrlResource(file.toUri()); if (resource.exists() || resource.isReadable()) { return resource; } else { throw new RuntimeException("Could not read the file!"); } this is how i am retriving image. this returns the image file as resourse — dilanka
@Aman i already used nginx to run my web application. did you mean i need separate nginx service for images?? — dilanka
one is enough. just provide react with the correct url of the image (which ideally should be done with back-end response). Like this {...., "thumbUrl": "http://ngnix-addr/url/image.jpg"} so react can render the image normally. And if you have spring-security, make sure that you allow access to those paths. — Aman

Akif Hadziabdic Akif Hadziabdic · Accepted Answer · 2021-03-05T09:09:59

You can configure spring boot to serve static content:

spring.resources.static-locations=file:/upload

or with code:

@Configuration
@EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {
  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry
      .addResourceHandler("/upload/**")
      .addResourceLocations("file:/upload/");
 }
...

how to retrieve images from server using spring boot and reactjs

1 Answers