如何为图片链接设置 ContextPath答案

【问题标题】：How to set ContextPath for an image link如何为图片链接设置 ContextPath
【发布时间】：2011-11-08 12:14:37
【问题描述】：

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

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

我使用<img src=contextPath+"/images/pageSetup.gif">，但图像未显示。有什么办法吗？

【问题讨论】：

如果您确实使用 JSP 来生成 HTML，那么您确实应该将该标签添加到问题中。

标签： html

【解决方案1】：

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

您最初提出的问题只会使回答者感到困惑并产生完全出乎意料的答案。使用问题标签，您可以到达特定的目标群体。如果您单独使用 [html] 标记，您将得到假设您使用的是纯/纯 HTML 而没有任何服务器端语言的答案。

回到你的问题：你可以使用${pageContext.request.contextPath}。

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

另见：

【讨论】：

是的。我会将我的整个代码发送给你。我把我的整个程序放在这里。<html> <head> <title>Document Printing Help</title> <meta http-equiv="cache-control" content="no-store"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Expires" content="-1"> <link href="theme/Master.css" rel="stylesheet" type="text/css"> </head> <body> <div id="helpBody" style="padding-left:10px"> <img src="/dnweb/images/pageSetup.gif"> <div style="text-align:center"> <a href="javascript:self.close()">Close this Window</a> </div> </div> </body> </html>
我想你不明白我的意思。您似乎正在使用 JSP。你应该在你的问题中说明这一点。我已经发布了如何在 JSP 中实现您想要的答案。

【解决方案2】：

您不能在 src 属性中编写 JavaScript。做你想做的事，试试这样的代码：

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

这里是目标；你要显示图片的地方，是一个div或者span，带有id显示。

Demo

使用 HTML，您将不得不承担一些额外的流量来产生错误，因此您可以替换图像，或者您可以按照 Google 的方式发送一些流量。 请不要使用这个：

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

Demo

不要使用这个。

【讨论】：

在 HTML 中我可以像上面提到的那样。
您可以在 HTML 中使用内联 JavaScript，但不建议这样做，维护起来会很困难。但是，如果您仍然想这样做，我将编辑我的答案并将其添加到那里。
好吧，对不起，我对 HTML 撒了谎。你不能用内联 JavaScript 做你想做的事，除非你可以先加载另一个图像并替换它。什么不工作？
它在 javascript 中工作，但我只使用没有 js 代码的 html。
如果您不使用 JavaScript，则不应使用 JavaScript 对其进行标记。你可以用服务器端代码做你想做的事

【解决方案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;
    }
};

【讨论】：