CODEWITHSUNDEEP
javaspringjsppath
Najoua
Najoua

Reputation: 411

Can't display image on jsp page

I am trying to display an image on a jsp page. I am developping using spring security/mvc.

Here's the folder structure this is the part of jsp page :

<a href="/images/logo.png">
<img src="/images/logo.png" alt="logo">
</a>

and this is the configuration :

@Configuration
@EnableWebMvc
@ComponentScan(basePackages ="...")
public class HelloWorldConfiguration extends WebMvcConfigurerAdapter {

@Bean(name="HelloWorld")
public ViewResolver viewResolver() {
  InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
    viewResolver.setViewClass(JstlView.class);
    viewResolver.setPrefix("/WEB-INF/views/");
    viewResolver.setSuffix(".jsp");

    return viewResolver;
 }

 /*
 * Configure ResourceHandlers to serve static resources like CSS/ Javascript etc...
 *
 */
 @Override
 public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("/static/");
        registry.addResourceHandler("/images/**").addResourceLocations("/images/");

 }


 @Override
 public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
    configurer.enable();
 }

}

when I run the image doesn't display. I tried a lot of suggestions none of them worked, I also tried relative and absolute paths.

Upvotes: 1

Views: 3861

Answers (3)

Oldskultxo
Oldskultxo

Reputation: 965

try using relative path to your image:

<a href="../../images/logo.png">
   <img src="../../images/logo.png" alt="logo">
</a>

Upvotes: 1

ekem chitsiga
ekem chitsiga

Reputation: 5743

According to your configuration your image should be in the root of the web app in the child folder images/logo.png. Your img tag should include the servlet context root. You should append the context root for example using jsp core tag library

<c:url value="/images/logo.png" var="logo"/>
<a href="${logoUrl}">
<img src="${logoUrl}" alt="logo">
</a>

NB. The method to append the context depends on the rendering technolgy. If you are using plain HTML you can append the context root manually. However this hardcodes the value and is a maintance nightmare as you need to change the value in every page when you need to change the context

<a href="/myapp/images/logo.png">
<img src="/myapp/images/logo.png" alt="logo">
</a>

Upvotes: 1

LoreV
LoreV

Reputation: 623

Surely the problem is your file structure. Open the developer tools using CTRL+SHIFT+I (in Mozilla or Chrome) and inspect the image element. Surely the link is broken meaning that you are trying to source the images from the wrong location (or a non-existing one).

Use the context path:

<img src="${pageContext.request.contextPath}/images/logo.png"/>

Upvotes: 1

Related Questions