CODEWITHSUNDEEP
spring-boot
Sasi Kathimanda
Sasi Kathimanda

Reputation: 1806

SpringBoot: Why images are not loading html <img src> tag

As part of my application, I'm saving a dynamically generated list of png files in "/build/test-results/output/png/zpl-1.png". In the html page, I have used all the following:

Works, but my saved images don't store in this location.

Not loading (error 404)

Not loading.

My configuration:

server:
    port: 8090
    contextPath: /zpa

Upvotes: 3

Views: 18224

Answers (5)

kalaivani v
kalaivani v

Reputation: 17

Dears,
I have followed the below steps to resolve the issue.
Steps:
1. My Apache Tomcat 9.0 server installed location is D:\apache-tomcat-9.0.8\apache-tomcat-9.0.8
2. I have created "images" folder under the "webapps" folder in Tomcat installed folder. Hence my folder structure is "D:\apache-tomcat-9.0.8\apache-tomcat-9.0.8\webapps\images".
3. Then I have cleared my browser history and run the application.
Now images are loading succesufully...

Upvotes: 0

Ashok Parmar
Ashok Parmar

Reputation: 408

**Outside server  call image file using Spring Boot**
  public class StaticResourceConfiguration extends WebMvcConfigurerAdapter{
    @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {

            String filePath = "E:/AshokParmar/Project/imges/";
            registry.addResourceHandler("/img/qrcode/**")
            .addResourceLocations("file:/"+filePath)
            .setCachePeriod(0);
        }
    }
    **in html file use below tags it works**
    <img src="<c:url value="/img/qrcode/0012340012.png" />"/>

Upvotes: 1

Caleb Eby
Caleb Eby

Reputation: 386

You can use relative links (with no slash at the beginning) to make the image paths relative to the HTML file that you are including the images in. All three links that you showed are absolute paths.

Relative paths are helpful when you don't know where you are going to be serving the files from, such as when you're just viewing the HTML file instead of actually using a server.

For example, if your HTML file is in the zpa folder,

<img src="build/resources/main/static/images/zpl-1.png" >

Upvotes: 1

Sasi Kathimanda
Sasi Kathimanda

Reputation: 1806

although i have tagged this question as "spring boot",probably i was missing it in the title may causes the confusion.

so here is how i solved it, the problem lies in configuring the static web resources in the spring boot config.

@Configuration
public class StaticResourceConfiguration extends WebMvcConfigurerAdapter {      
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/pngFiles/**")
        .addResourceLocations("file:ext-resources/")
        .setCachePeriod(0);
    }

and in my index.html using <img src="/zpa/pnFiles/zpl-1.png"> works.

Upvotes: 4

Gavin
Gavin

Reputation: 2153

Those paths are server file paths and would only work on the local machine (the machine that host the files).

You either need to move the upload directory to somewhere on the public side of the server (ie in the document root) and use a relative path

or

You will need a server side script that can fetch the images from a directory outside the document root and server them as an image.

Upvotes: 1

Related Questions