Home/ Questions/Q 6945283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:24:59+00:00

I have a spring based web application MyWebapp built using maven and deployed on

  • 0

I have a spring based web application MyWebapp built using maven and deployed on Websphere 6.1

The folder structure is:

MyApp –> src —> main —>

The main folder is further having resources and webapp folders.

webapp folders is having other folders like images, theme, jscript, JSP, META-INF, WEB-INF

images folder is having icons folder with say example.png

So fetching example.png on localhost as:

http://localhost:9080/MyWebapp/images/icons/example.png

succeeds.

In jscript folder I have a sample.js javascript file where some functions are defined.

I am importing this javascript file in JSP pages as:

<script src="<%=request.getContextPath()%>/jscript/sample.js" type="text/javascript" language="Javascript"></script>

This javascript file is having a function which tries to fetch image as below:

iconFile = '../images/icons/search_result.png';  
anchor.style.backgroundImage = 'url(' + iconFile + ')'; 
anchor.style.backgroundRepeat = 'no-repeat';        
anchor.style.backgroundPosition = '1px 2px';        
anchor.className = 'toplevel-tab';

The complete function basically tries to place a icon before some text in JSP.

The code gets parsed. However, the image does not get displayed.

Running the code independently on a simple html with the png images in the same folder as html and javascript files succeeds. Here i will just have iconFile = “search_result.png”

So, it is not code issue.

Issue is that the image is not getting located or the server is unable to find the image in above javascript code.

What am I doing wrong ?
How can I solve it ?

The answer for https://stackoverflow.com/a/8298652/887235 which I accepted earlier does not work.
So please do not downvote this question as a duplicate one.

Also I am working on restricted environment where access to programs like Tail will not work.

Changing 

iconFile = '../images/icons/search_result.png';

to

iconFile = '/images/icons/search_result.png';

also does not work!!

Thanks for reading!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You just have to understand how relative paths work. Even if the path is in a JavaScript file, the path is not relative to the location of this JS file, but it’s relative to the URL of the HTML page being displayed in the browser.

    So, if the URL of the page executing this javascript code is 

    http://foo.bar.com/myWebApp/zim/boom/tchak.html

    and the URL of the image is 

    ../images/icons/search_result.png

    The absolute URL of the image will be

    http://foo.bar.com/myWebApp/zim/boom/../images/icons/search_result.png

    which is the same as

    http://foo.bar.com/myWebApp/zim/images/icons/search_result.png

    An absolute path like /images/icons/search_result.png is also resolved from the root of the web server, and not the root of the webapp (the browser doesn’t know what a Java webapp is and doesn’t care). So it’s resolved as

    http://foo.bar.com/images/icons/search_result.png

    You would need to prepend the context path to the path to make it really absolute:

    <%=request.getContextPath()%>/images/icons/search_result.png

    or, without scriptlets:

    ${pageContext.request.contextPath}/images/icons/search_result.png
    • 0