如何设置图片链接的ContextPath

Question

我正在尝试将图像的上下文路径放在HTML.<img src="/MyWeb/images/pageSetup.gif">中

这里的/MyWeb是硬编码的ContextPath。我如何才能动态获取。

我正在使用作为<img src=contextPath+"/images/pageSetup.gif">，但图像不显示。有没有什么选择。

Answer 1

您不能在src属性中编写JavaScript。要执行您想要的操作，请尝试下面这样的代码：

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

这里的目标；您想要显示图像的位置，是一个带有id显示的div或span。

Demo

使用HTML，你将不得不承担一些产生错误的额外流量，所以你可以替换图像，或者你可以用Google的方式发送一些流量。请不要使用此命令：

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

Demo

不要使用这个。

Answer 2

首先，“上下文路径”是JSP/Servlet web应用程序中通常使用的一个术语，但是您没有提到任何关于它的内容。但是，您的question history会确认您正在使用JSP/Servlet。将来，您应该告诉并标记您正在使用的服务器端语言，因为“普通HTML”根本没有“变量”和“动态生成”的概念。它是像JSP这样的服务器端语言，具有维护和访问变量以及动态生成HTML的能力。可以使用JavaScript，但它有其局限性，因为它在not浏览器中运行，而不是在not服务器中运行。

你最初的问题只会让回答者感到困惑，并产生完全意想不到的答案。通过问题标签，你可以接触到特定的目标群体。如果你单独使用[html]标签，你会得到一些答案，假设你使用的是纯/普通的超文本标记语言，没有任何服务器端语言。

回到您的问题:您可以使用${pageContext.request.contextPath}来实现这一点。

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

另请参阅：

• How to use relative paths without including the context root name?
• Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP

Answer 3

为此，您必须使用JavaScript。

首先，让所有图像指向您的域上的某个虚拟的空图像，同时将实际路径作为自定义属性：

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

现在有了这样的JavaScript代码，可以遍历所有图像并更改它们的源代码，以使用上下文路径：

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;
    }
};