JSP环境下如何通过JavaScript正确设置img标签的src属性？

首先，你之前用<c:url>标签是完全正确的——它会自动处理项目的上下文路径（比如你的项目部署在/myapp下，<c:url>会生成/myapp/images/fcs1.svg），完美避开了相对路径带来的混乱。而直接用require("../images/fcs1.svg")不生效，主要有两个核心原因：

1. 浏览器原生不支持require()方法，除非你引入了Webpack、Browserify这类构建工具；
2. 就算有构建工具，相对路径是基于JS文件的位置，而非当前页面的URL，很容易出现路径匹配错误。

下面给你几个靠谱的解决方案，按需选择：

方案1：复用JSP标签的路径处理能力（最稳妥） #

直接让JSP帮你生成正确的路径，再传给JavaScript使用：
在你的JSP页面中，先把SVG的正确路径存在全局变量里：

<script>
  // 用<c:url>生成带上下文的完整URL，存在全局变量中
  window.sharkSvgUrl = "<c:url value='/images/fcs1.svg'/>";
</script>

然后在你的JavaScript代码里直接调用这个变量：

$("#sharkgraphic").attr("src", window.sharkSvgUrl);

方案2：手动拼接上下文路径 #

如果不想用全局变量，可以直接在JS中获取项目的上下文路径，拼接成完整URL：

// 通过JSP的EL表达式获取项目上下文路径
const contextPath = "${pageContext.request.contextPath}";
// 拼接成SVG的完整访问路径
const sharkUrl = `${contextPath}/images/fcs1.svg`;
// 设置img的src属性
$("#sharkgraphic").attr("src", sharkUrl);

${pageContext.request.contextPath}会被JSP渲染成项目的上下文路径（比如/myapp），这样生成的路径不管项目部署在哪里都是正确的。

方案3：如果用Webpack等构建工具 #

如果你的项目依赖构建工具，需要先配置资源加载器（比如file-loader），然后可以这样写：

// 路径是相对于当前JS文件的位置
import sharkUrl from "../images/fcs1.svg";
$("#sharkgraphic").attr("src", sharkUrl);

或者用CommonJS风格的require：

const sharkUrl = require("../images/fcs1.svg");
$("#sharkgraphic").attr("src", sharkUrl);

别忘了在Webpack配置中添加SVG的处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ["file-loader"]
      }
    ]
  }
};

总结一下：普通JSP项目（无构建工具）优先选方案1或2；用了构建工具再考虑方案3。

内容的提问来源于stack exchange，提问作者MadMax