≡ Menu

How to display images stored on a server

So I recently got a contract to create a website that would function similar to kijiji or craigslist.  This particular site is to be constructed around a particular niche.  I was confident in my ability to create this website in a reasonable amount of time, but I hadn’t planned on one particular part causing me so much grief.  This is usually the case with any programming project, there’s always something that will slow you down.  So I’m posting this content to help you if you’re in the same situation.

Here’s the breakdown of the workflow.

User A Uploads Pictures -> Pictures are stored on server -> User B loads website -> User B sees pictures from User A

Pretty simple workflow right?  Well, apparently it wasn’t so simple.  Here’s the places I went wrong:

  1. I tried to link the <img> tags straight to the server’s image folder like so:
    • <img src="c:/server/images/img1.jpg" />
    • It’s a no go, modern browsers these days don’t let you refer to a directory on a server like this (fail)
  2. I tried to create a servlet that would map a particular directory (i.e. /myApp/images/) to a controller and then return a byte array with the contents of the image
    • Okay, so this sort of worked. But the main issue was that it wouldn’t really cache the images, so every single time you hit the page, it would reload each of the images, and that really killed the user experience of my page (fail)
  3. I tried storing the images in my database and retrieving them via a servlet, but this was just as useful as attempt #2 above.  (fail)

Here’s the correct solution that I finally landed on.  You need to setup a context path for your webapp.  Here’s how I did it:

First, you need to create an xml file that will define your context path, like so:  (Success!)

So this file, named WoodworkingExchange#thumbs.xml (for good reason) maps the path ‘/WoodworkingExchange/thumbs’ to a physical location on my server ‘c:\DEV_ECOSIM\thumbs’.

Now, the location of this file, and the name of this file is critical.  The location must be inside of your tomcat’s conf\Catalina\localhost directory.  Now, this is a common setup for most people, though if you have a different engine and host name then you’ll have to change the directories.  The file name is named after the name of the webapp, in the case WoodworkingExchange (this is the name of the application that’s deployed in my webapps folder).  But then I have a hashtag (#) and the name thumbs… this is what maps ‘WoodworkingExchange/thumbs’ path, the hashtag (#) is a placeholder for the forward slash (/).  So, if I wanted to choose a different location for my images, like say ‘WoodworkingExchange/images’, I would name my XML file “WoodworkingExchange#images.xml”, and inside the file, I would replace the path=”/WoodworkingExchange/thumbs” with path=”/WoodworkingExchange/images”.

Here’s an excerpt from the Apache Tomcat documentation (http://tomcat.apache.org/tomcat-5.5-doc/config/context.html):

Context elements may be explicitly defined:

  • In the $CATALINA_HOME/conf/context.xml file: the Context element information will be loaded by all webapps.
  • In the $CATALINA_HOME/conf/[enginename]/[hostname]/context.xml.default file: the Context element information will be loaded by all webapps of that host.
  • In individual files (with a “.xml” extension) in the $CATALINA_HOME/conf/[enginename]/[hostname]/ directory. The name of the file (less the .xml) extension will be used as the context path. Multi-level context paths may be defined using #, e.g. foo#bar.xml for a context path of /foo/bar. The default web application may be defined by using a file called ROOT.xml.
  • Only if a context file does not exist for the application in the $CATALINA_HOME/conf/[enginename]/[hostname]/; in an individual file at /META-INF/context.xml inside the application files. If the web application is packaged as a WAR then /META-INF/context.xml will be copied to $CATALINA_HOME/conf/[enginename]/[hostname]/ and renamed to match the application’s context path. Once this file exists, it will not be replaced if a new WAR with a newer /META-INF/context.xml is placed in the host’s appBase.
  • inside a Host element in the main conf/server.xml

The approach I took here is in the third bullet above (where we have individual XML files.  So, now in my JSP files, I can just reference images like so:

<img src="WoodworkingExchange/thumbs/image.PNG" width="175px"/>

And Voila, they’ll show up!

{ 15 comments… add one }
  • Blogger Blogged July 12, 2012, 8:18 pm

    Hey neat weblog, just wondering what spam software package you use for comments because i get lots on my webpage. Can you please let me know here, so that not only I but other readers can put it on our weblogs as well.

    • Trevor Page July 12, 2012, 8:49 pm

      I use wordpress, it has built in comment moderation which allows me to strip URLs from spammers comments, yet leave their comments intact! Pretty powerful stuff 😉

  • Almira July 24, 2012, 7:48 am

    this information needs to be passed to other people, and i will definitely do it.

  • MANIMOZHI S December 7, 2016, 6:11 am

    In local machine its display the images but when we deployed into the server it doesnt show the images.
    What I have to chnages. Tomcat webapss path or ? !!
    Thanks In Advance

  • roman December 29, 2016, 1:13 am

    remove my question and do not give solution

  • Lisa Brooks June 21, 2017, 11:38 am

    What would be the equivalent file location if using Glassfish 4 instead of Tomcat?

  • cycling fashion July 12, 2017, 7:34 pm

    I got this web page from my friend who informed me about this web site and now this time I am visiting this web site and reading very informative content here.

  • great post to read July 16, 2017, 1:39 am

    Hoodie is going to be your comfy weekend staple.

  • Nikita August 10, 2017, 6:29 pm

    Great article, thank you!

    Anyway, the image is not displayed when writing this way:

    But, if we add a forward slash before “WoodworkingExchange”, then everything works just fine.

    At first glance, it seems kind of obvious because the src attribute “path” doesn’t match the “path” of the Context. However, we can get rid of the forward slash in the Context path:

    It will still work as it should. Nevertheless, it’s mandatory to put “/” before the name of the app in the “src” attribute of the “img” tag.
    Why’s that so?
    Does that forward slash in the beginning mean that the app is relative to our localhost ?
    Then why is it missing in the context path?

    • Nikita August 10, 2017, 6:32 pm

      Don’t know why, but the tags weren’t displayed.

      “Anyway, the image is not displayed when writing this way:”
      @img src=”WoodworkingExchange/thumbs/image.PNG” width=”175px”@

      However, we can get rid of the forward slash in the Context path:
      @Context path=”WoodworkingExchange/thumbs” docBase=”e:/thumbs” @

  • Shay October 2, 2017, 2:42 pm


  • marc October 14, 2017, 9:30 pm

    thank you very much,
    unfortunatly I can’t get it to work,
    also I’m new to java, but it’s simple,in the xml file I’ve put:

    and savec it in catalina home localhost,
    so the link:
    should download from:
    but i get :
    description The requested resource is not available.
    can you help please ?

  • Shaheen Mulla February 27, 2018, 3:37 am

    This works perfectly fine!

  • Yassine Say April 6, 2018, 8:20 pm

    Very useful thanks, saved my life.
    For Eclipse users, you can add the contexte tag with your path on server.xml under the .
    wich you can find on the “Servers/Tomcat vN.N Server at localhost-config” folder on your Project Explorer.
    This worked fine for me.

Cancel reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.