如何在jsp界面中插入图片

初学Ja va Web时，不少朋友都会踩的一个坑：在JSP页面里怎么折腾，图片就是显示不出来。明明代码看着没问题，路径也手动敲了好几遍，结果浏览器里就是个裂开的图标。这问题看似简单，但卡住新手的情况还真不少。

网上搜一圈，答案基本都指向“路径问题”。说实话，刚开始我也挺自信，仗着写过一点HTML，直接写了，觉得路径不可能错。结果呢？确实就错在路径上——所以，别太相信自己的半吊子经验。

要搞清楚这个问题，得先重新认识一下相对路径和绝对路径的区别。在JSP中，绝对路径默认是不能直接用的（除非你对Tomcat做额外配置），所以最稳妥的办法是用相对路径。这意味着，你的图片文件夹和JSP文件得放在同一个目录层级下。

下面直接给出一套经过验证的最佳实践，按步骤来就行。

0. 准备部分：建立Dynamic Web Project

这里以项目名 Shop3 为例。Eclipse或IDEA里新建一个动态Web项目，结构是标准的。

1. 在WebContent下建立image文件夹，并放入图片logo.png

2. 在WebContent下建立index.jsp文件

注意看，这时候JSP文件和image文件夹就是在同一个目录（WebContent）下面的。

3. 在index.jsp中编写图片路径代码

4. 运行程序，查看结果

到这里，图片应该就能正常显示了。

不过，问题解决之后，我们不妨多留个心眼。观察浏览器的地址栏，你会发现JSP文件的路径是 http://localhost:8080/Shop3/index.jsp，而图片的地址（右键复制图片地址）是 http://localhost:8080/Shop3/image/logo.png。这两个地址里都没有出现“WebContent”这个目录名。这说明，Tomcat在部署时，WebContent就是根路径，所有资源的引用都从它下面开始算起。理解了这一点，以后遇到类似路径问题，思路就会清晰很多。