1

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.

Najoua
  • 391
  • 1
  • 7
  • 15
  • Could you post your folder structure?Do you want that when your image is clicked, just open it? – Oldskultxo May 06 '16 at 11:59
  • I can't see the image neither in the jsp page or when I click it, I edited the post so you can see the folder structure – Najoua May 06 '16 at 12:00
  • Ok! and your jsp where is placed? could you open webinf folder too? – Oldskultxo May 06 '16 at 12:03
  • I have add an answer – Oldskultxo May 06 '16 at 12:09
  • Possible duplicate of [How to use relative paths without including the context root name?](http://stackoverflow.com/questions/4764405/how-to-use-relative-paths-without-including-the-context-root-name) – Alan Hay May 06 '16 at 12:24
  • I don't think so, because I tried relative and absolute paths, and it doesn't work, I was trying to find a way to display the image. – Najoua May 06 '16 at 12:36

3 Answers3

1

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"/>
LoreV
  • 575
  • 5
  • 25
  • There is a better solution here which avoids the need to specify the context root for every image. http://stackoverflow.com/questions/4764405/how-to-use-relative-paths-without-including-the-context-root-name – Alan Hay May 06 '16 at 12:26
1

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>
ekem chitsiga
  • 5,523
  • 2
  • 17
  • 18
1

try using relative path to your image:

<a href="../../images/logo.png">
   <img src="../../images/logo.png" alt="logo">
</a>
Oldskultxo
  • 945
  • 8
  • 19