I'm trying to build a function of uploading image to images folder inside resources with directory:
resources/static/images/imagesName.jpg
Here is the code for this function:
public String Redirection(String Parameter, MultipartFile sourceFile, Integer VID) throws IOException, NoSuchAlgorithmException, KeyManagementException{
// upload image into resources
byte[] bytes = sourceFile.getBytes();
String fileType = sourceFile.getOriginalFilename();
String[] parts = fileType.split(Pattern.quote("."));
String part1 = parts[0];
String part2 = parts[1];
String fileLocation = new File("src\\main\\resources\\static\\images").getAbsolutePath() + "\\" + VID + "." + part2;
System.out.println(fileLocation);
Path path = Paths.get(fileLocation);
Files.write(path, bytes);
}
For this part, it's working fine. However, when I try to retrieve the image on front end which is on vue, I'm stuck with how it's supposed to work. I tried to refer to this one answered by Bamossza
Spring Boot unable to serve static image from resource folder
which I add configuration on my main application as follows:
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**").addResourceLocations("classpath:/static/")
.setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
}
}
And on the front end which is on Vue.js, I retrieve the image by doing
<CImg src="/images/141.png" shape="rounded"></CImg>
The image should be dynamic but for now, I'm just trying to make it display first but it doesn't show anything. Is there any solution to make it work? Thank you in advance!
