JSP not displaying images

[Anurag Bhardwaj]

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]

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]

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]

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)

<img src="<%=request.getContextPath()%>/image/<%=item.getImage_name()%>"/>

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

[Anurag Bhardwaj]

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]

Can you verify if the deployment is successful?

Are you doing it through Eclipse?

[Anurag Bhardwaj]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

Hi

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

[Jaikiran Pai]

${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]

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]

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:

NewDashboard
    |
    |--- WebContent
    |       |--- image
    |               |--- cal.gif
    |
    |--- WEB-INF 

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]

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

Image is still not displayed.