How to set ContextPath for an image link

Question

i am trying to put context path for an image in HTML.<img src="/MyWeb/images/pageSetup.gif">

Here /MyWeb is the ContextPath which is hardcoded. How can i get dynamically.

i am using as <img src=contextPath+"/images/pageSetup.gif">but image is not displaying. Is there any option.

If you're indeed using JSP to generate HTML, you should really add that tag to the question. — BalusC, Nov 08 '11 at 13:55

score 4 · Answer 1 · edited May 23 '17 at 12:07

First of all, "Context path" is a term which is typically used in JSP/Servlet web applications, but you didn't mention anything about it. Your question history however confirms that you're using JSP/Servlet. In the future, you should be telling and tagging what server side language you're using, because "plain HTML" doesn't have a concept of "variables" and "dynamic generation" at all. It are server side languages like JSP which have the capability of maintaining and accessing variables and dyamically generating HTML. JavaScript can be used, but it has its limitations as it runs in webbrowser, not in webserver.

The question as you initially have will only confuse answerers and yield completly unexpected answers. With question tags you reach a specific target group. If you use alone the [html] tag, you will get answers which assume that you're using pure/plain HTML without any server side language.

Back to your question: you can use ${pageContext.request.contextPath} for this.

<img src="${pageContext.request.contextPath}/images/pageSetup.gif">

yes. i will send my entire code to you. I am putting my entire program here.` Document Printing Help

Close this Window

` — Mdhar9e, Nov 08 '11 at 14:23
I think you didn't understand me. You seem to be using JSP. You should tell that in your question. I've already posted an answer how to achieve what you want in JSP. — BalusC, Nov 08 '11 at 14:24

Some Guy · Accepted Answer · 2011-11-08T12:40:43.923

2

You can't write JavaScript in the src attribute. To do what you want, try some code like this:

var img = new Image();
img.src = contextPath + "/images/pageSetup.gif";
document.getElementById('display').appendChild(img);

Here the target; the place where you want to display the image, is a div or span, with the id display.

Demo

With HTML, you'll have to take some extra traffic of producing an error, so you can replace the image, or you can send some traffic Google's way. Please do not use this:

<img src='notAnImage' onerror='this.src= contextPath + "/images/pageSetup.gif" '>

Demo

Do not use this.

edited Nov 08 '11 at 12:40

answered Nov 08 '11 at 12:23

Some Guy

14,742
10
54
67

In HTML can i mention like above . – Mdhar9e Nov 08 '11 at 12:32
You can have inline JavaScript in HTML, but it isn't recommended and maintaining it will be difficult. But if you still want to do it anyway, I'll edit my answer and add it there. – Some Guy Nov 08 '11 at 12:33
Okay, I'm sorry, I lied about the HTML. You can't do what you want with inline JavaScript, unless you're fine with having to load another image first and replacing it. What is not working? – Some Guy Nov 08 '11 at 12:36
It is working in javascript but i am using only html with out js code. – Mdhar9e Nov 08 '11 at 12:52
If you weren't using JavaScript, you shouldn't have tagged it with JavaScript. You can do what you want with server-side code – Some Guy Nov 08 '11 at 12:54
But you have hardcoded the context path `onerror='contextPath = "https://developer.mozilla.org/"; `. I dont want this. – Mdhar9e Nov 08 '11 at 13:02
From where do you want to change contextPath? JavaScript, right? – Some Guy Nov 08 '11 at 13:09
in html page.Not in javascript.i have the code is `` I want `/myapp` in dynamically. my page is print.html. – Mdhar9e Nov 08 '11 at 13:23
On your HTML page, make script tags, and put the JavaScript in there. Make a div tag where you want your image to be displayed, with the id 'display'. *Please* learn the language before going off trying to use it. – Some Guy Nov 08 '11 at 13:24

score 0 · Answer 3 · answered Nov 08 '11 at 13:40

You must use JavaScript for this.

First, have all images point to some dummy empty image on your domain while putting the real path as custom attribute:

<img src="empty.gif" real_src="/images/pageSetup.gif" />

Now have such JavaScript code in place to iterate over all the images and change their source to use the context path:

var contextPath = "/MyRealWeb";
window.onload = function() {
    var images = document.getElementByTagName("img");
    for (var i = 0; i < images.length; i++) {
        var image = images[i];
        var realSource = image.getAttribute("real_src") || "";
        if (realSource.length > 0)
            image.src = contextPath + realSource;
    }
};

How to set ContextPath for an image link

3 Answers3

See also:

Linked