JSP中JavaScript缩略图函数在Tomcat中被截断的问题排查

问题原因 #

Tomcat作为JSP容器，会自动解析页面中的EL表达式（格式为${...}）。你写在JSP里的JavaScript模板字符串${data.url}，被JSP引擎误认为是后端需要渲染的EL变量。由于后端没有在请求作用域中传入对应的data.url变量，JSP解析后就将这部分替换成了空字符串，最终导致src属性值为空。

本地运行正常的原因通常是：本地开发环境的JSP配置禁用了EL表达式解析，或者你是直接打开静态HTML文件而非通过Tomcat编译运行JSP。

解决方法 #

方法1：转义EL表达式 #

在JSP的JavaScript代码中，把${转义为\${}，让JSP引擎跳过解析，保留给前端JavaScript处理。修改后的代码如下：

// Generate thumbnails and add click event listeners
imageData.forEach((data, index) => {
    const thumbnail = document.createElement('div');
    thumbnail.classList.add('thumbnail');
    thumbnail.innerHTML = `<img src=\"\${data.url}\" alt=\"Thumbnail \${index + 1}\">`;
    thumbnail.addEventListener('click', () => displayImage(index));
    galleryContainer.appendChild(thumbnail);
});

方法2：将JS代码移至独立静态文件 #

把生成缩略图的JavaScript代码放到单独的.js文件（比如gallery.js）中，然后在JSP里通过<script src="gallery.js"></script>引入。静态JS文件不会被JSP引擎解析，自然不会出现EL表达式被误处理的问题。这也是最推荐的做法，能分离前后端代码，避免类似冲突。

方法3：改用字符串拼接 #

如果不想处理转义，可以放弃模板字符串，改用传统的字符串拼接方式，避开${}格式：

thumbnail.innerHTML = '<img src="' + data.url + '" alt="Thumbnail ' + (index + 1) + '">';

内容的提问来源于stack exchange，提问作者Gunārs Šmerliņš