aspose file tools*
The moose likes IDEs, Version Control and other tools and the fly likes JSP not displaying images Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » IDEs, Version Control and other tools
Bookmark "JSP not displaying images" Watch "JSP not displaying images" New topic
Author

JSP not displaying images

Anurag Bhardwaj
Greenhorn

Joined: Jun 19, 2013
Posts: 12

Hi

I have checked on many forums and find that this is very common issue.

I am trying to display an image through JSP but it is not picking up the image path. I have tried both the Absolute and Relative path but still the image is not displaying.

I tried to dynamically grab the context path and used an EL expression
${pageContext.request.contextPath}/webapps/img/cal.gif
but the image is not getting displayed.

The image folder is under contextroot/webapps.

-contextroot
--webapps
---img

When i put URL http://localhost:8080/contextroot/webapps/img/cal.gif in browser to fetch image, it returns to same page.

I have also checked the case for entire path (as mentioned in many forums) and the case is correct.

Please let me know what is missing.

Thanks in advance.

Anu

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Is ${pageContext.request.contextPath} correctly emitting /contextpath?

P.S. webapps is a really really bad name to use for a folder. (Confusion with Tomcat webapps folder).


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Anurag Bhardwaj
Greenhorn

Joined: Jun 19, 2013
Posts: 12

Yes, ${pageContext.request.contextPath} is correctly emitting /contextpath. The value coming from ${pageContext.request.contextPath}/webapps/img/cal.gif is /contextroot/webapps/img/cal.gif.
I have tried moving img folder one level up under contextroot and tried ${pageContext.request.contextPath}/img/cal.gif but still image is not getting displayed.

The application is deployed in Tomcat.

Anu
Prajakta Acharya
Ranch Hand

Joined: Nov 08, 2012
Posts: 138

I have this set-up which works.

Images are placed at the following location:
/Web Content/image/<all images here>

i have written following code in the JSP. (Not tried with EL though)



Web Content folder is created by Eclipse and I have WEB-INF inside it.


Regards,
Prajakta
Anurag Bhardwaj
Greenhorn

Joined: Jun 19, 2013
Posts: 12

I have placed image folder as you suggested to WebContent folder and tried using <%=request.getContextPath()%>/img/cal.gif but the images are still not getting displayed.
When i right click image to know its path by clicking properties it shows URL as http://localhost:8080/contextroot/img/cal.gif.

When i put this URL in browser it comes to same page.
Prajakta Acharya
Ranch Hand

Joined: Nov 08, 2012
Posts: 138

Can you verify if the deployment is successful?

Are you doing it through Eclipse?

Anurag Bhardwaj
Greenhorn

Joined: Jun 19, 2013
Posts: 12

The deployment is successful. The Page is displayed correctly, but image is not getting displayed.
I have tried deployment both in eclipse (By Run As -> Run On Server) and by creating WAR file deploying manually on Tomcat.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Why did you change to scriptlets when the EL was emitting the right thing? Put the EL back and remove the scriptlets.

Do a View Source at the browser to see what the image src attribute contains. Does it match the URL that allows you to view the image from the browser bar?
Anurag Bhardwaj
Greenhorn

Joined: Jun 19, 2013
Posts: 12

I had changed to scriptlets try the suggestion of Prajakta. I have again changed it to EL.

Location of image file - C:\Work\contextroot\WebContent\image\cal.gif
Address (URL) from IE Properties - http://localhost:8080/contextroot/WebContent/image/cal.gif
EL - <img src="${pageContext.request.contextPath}/WebContent/image/cal.gif" alt= "No image available" width="150" height="40" border="0">
Browser View Source, Image Source value - <img src="/contextroot/WebContent/image/cal.gif" alt= "No image available" width="150" height="40" border="0">

These are details for the image file.

The URL http://localhost:8080/contextroot/WebContent/image/cal.gif also does not display image, it again comes to the same page where other details are displayed.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Anurag Bhardwaj wrote:I had changed to scriptlets try the suggestion of Prajakta.

That was poor advice.

Location of image file - C:\Work\contextroot\WebContent\image\cal.gif

You have a folder named contextroot and one named WebContent. Why is that? Which is really the context root? That's a really poor and confusing choice of folder structure.

Are you running this in eclispse or something like that? If so, that's a detail we need to know right off the bat.

Prajakta Acharya
Ranch Hand

Joined: Nov 08, 2012
Posts: 138

Hi Bear,

I had just put up my working set-up here. I agree that EL should be preferred.

In my web application set up through Eclipse, a Web Content folder is created by Eclipse and in the deployment process, all the contents of that folder are placed in the application folder directly.
So, images put under Web Content/image directory are deployed under <web app folder/image> by Eclipse installation.

Anurag Bhardwaj
Greenhorn

Joined: Jun 19, 2013
Posts: 12

My apologies for confusion in folder names. Here the contextroot specifies application name. Actually the application name is NewDashboard.
The application has WebContent folder which has WEB-INF, image folders.

I changed the folder names from earlier webapps as it was confusing. The folder structure is -

-NewDashboard
--WebContent
--image
--WEB-INF

Location of image file - C:\Work\NewDashboard\WebContent\image\cal.gif
Address (URL) from IE Properties - http://localhost:8080/NewDashboard/WebContent/image/cal.gif
Browser View Source, Image Source value - <img src="/NewDashboard/WebContent/image/cal.gif" alt= "No image available" width="150" height="40" border="0">

I have tried these EL's but image is not getting displayed -

EL - <img src="${pageContext.request.contextPath}/WebContent/image/cal.gif" alt= "No image available" width="16" height="16" border="0">
EL - <img src="${pageContext.request.contextPath}/image/cal.gif" alt= "No image available" width="16" height="16" border="0">

When i View Source and in that i change image path to actual path on system (C:\Work\NewDashboard\WebContent\image\cal.gif) image is displayed.

Please let me know if some mistake is done and something is missing.


Prajakta Acharya
Ranch Hand

Joined: Nov 08, 2012
Posts: 138

Why is Web Content a part of URL? It should not be.

Have you tried this URL?
http://localhost:8080/NewDashboard/image/cal.gif
Anurag Bhardwaj
Greenhorn

Joined: Jun 19, 2013
Posts: 12

Yes, URL http://localhost:8080/NewDashboard/image/cal.gif also does not display image, it again comes to the same page where other details are displayed.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Stop! Just stop! You're just making it all a mess!

Answer the following questions:
  • Are you running this in eclispe or another IDE. Yes or no?
  • What folder is configured as the context path? It should be the one containing WEB-INF.


  • Until we know that, doing anything else is useless.
    Anurag Bhardwaj
    Greenhorn

    Joined: Jun 19, 2013
    Posts: 12


    Qu: Are you running this in eclispes or another IDE. Yes or no?

    The application is developed and deployed using eclipse. eclipse is creating WebContent folder by default where WEB-INF, META-INF folders are placed. I have created image folder in WebContent folder.
    I have tried deployment both in eclipse (By Run As -> Run On Server) and by creating WAR file deploying manually on Tomcat.

    Qu: What folder is configured as the context path? It should be the one containing WEB-INF.

    NewDashboard folder as contextPath. When i run ${pageContext.request.contextPath} the value coming is /NewDashboard.


    I have tried these EL's but image is not getting displayed -

    EL - <img src="${pageContext.request.contextPath}/WebContent/image/cal.gif" alt= "No image available" width="16" height="16" border="0"> in this case - Address (URL) from IE Properties is - http://localhost:8080/NewDashboard/WebContent/image/cal.gif
    EL - <img src="${pageContext.request.contextPath}/image/cal.gif" alt= "No image available" width="16" height="16" border="0"> in this case Address (URL) from IE Properties - http://localhost:8080/NewDashboard/image/cal.gif

    Both these case image is not getting displayed using URL coming in IE Properties (http://localhost:8080/NewDashboard/WebContent/image/cal.gif , http://localhost:8080/NewDashboard/image/cal.gif )

    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61434
        
      67

    Here's my advice: ditch eclipse as the container. I think it's fine to use an IDE such as eclipse as a smart editor (I use IntelliJ), but I've always found that trying to run a web app from the IDE introduces more complexity than it solves. The addition of the senseless and superfluous WebContent folder is a good example.

    My advice: structure the app simply, and make sure that your images folder is in the web context folder (the one with WEB-INF) and that you don't need to include any other ridiculous, superfluous folder such as WebContent in your URLs. Your URL should end up being /context-path/whatever.

    If you want to continue using eclipse as the execution platform, let me know and I will move this to the IDEs folder because the problem is in the eclipse project, and not a general JSP issue.
    Anurag Bhardwaj
    Greenhorn

    Joined: Jun 19, 2013
    Posts: 12

    Thanks Bear.

    I have downloaded IntelliJ and trying to get hold of it, but it would be nice to get a solution from eclipse also.

    Please help in moving this to the IDEs folder.
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61434
        
      67

    My point in mentioning IntelliJ is not that it will solve your problems (though I do think it is a better IDE) but just pointing out that I use an IDE as a "smart editor", but run the web apps separately in standalone Tomcat instance. That gets config and limitations of the IDE out of my hair, and I never, ever, ever, run into these kind of issues.

    I've moved this to the IDEs forum for you. Good luck.
    Anurag Bhardwaj
    Greenhorn

    Joined: Jun 19, 2013
    Posts: 12

    Hi

    I am still having the problem. Can someone from IDE help.
    Jaikiran Pai
    Marshal

    Joined: Jul 20, 2005
    Posts: 10210
        
    166

    ${pageContext.request.contextPath}/WebContent/image/cal.gif


    Why do you have the word "WebContent" in there? Like Bear has been trying to explain, all this is unnecessary complexity due to the IDEs. All you need is the resource to be available within the deployed application and based on what you have said so far, the URL should be ${pageContext.request.contextPath}/image/cal.gif.

    [My Blog] [JavaRanch Journal]
    Anurag Bhardwaj
    Greenhorn

    Joined: Jun 19, 2013
    Posts: 12

    My Folder structure is -

    -NewDashboard
    --WebContent
    --image
    --WEB-INF

    I have also tried moving image folder under "New DashBoard"

    I have tried this EL but image is not getting displayed -

    EL - <img src="${pageContext.request.contextPath}/image/cal.gif" alt= "No image available" width="16" height="16" border="0"> in this case Address (URL) from IE Properties - http://localhost:8080/NewDashboard/image/cal.gif

    Both image is not getting displayed using URL coming in IE Properties (http://localhost:8080/NewDashboard/image/cal.gif )

    Jaikiran Pai
    Marshal

    Joined: Jul 20, 2005
    Posts: 10210
        
    166

    I have no clue about how IDE treats the WebContent folder. One thing you could try is to move that image folder and its contents to *inside* the WebContent folder. Don't do any other changes, leave WEB-INF where it is now. Like this:


    Finally, stick with this URL ${pageContext.request.contextPath}/image/cal.gif. See if that works.

    P.S: If you are new to web development, which I think you are, you should really keep out the IDE from the equation. It's just frustrating to see all this unnecessary mess.
    Anurag Bhardwaj
    Greenhorn

    Joined: Jun 19, 2013
    Posts: 12

    I have moved image folder under WebContent and tried - ${pageContext.request.contextPath}/image/cal.gif

    Image is still not displayed.
     
    I agree. Here's the link: http://aspose.com/file-tools
     
    subject: JSP not displaying images