Check out Manning's Countdown to 2014. Use discount code crdotd14 all month for 50% off every deal.
Big Moose Saloon
 Search | Java FAQ | Recent Topics Register / Login

# 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: 58840 59 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).

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: 136 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: 136 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: 58840 59 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: 58840

59

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

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: 136

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: 136

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: 58840

59

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

• 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: 58840 59 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: 58840 59 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: 8892 107${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. 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: 8892

107

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.

subject: JSP not displaying images