关于“使用web项目时，在前端通过相对路径访问本地图片资源”的问题解决

最近，在进行web项目开发时，我遇到了一个关于项目前端图片资源访问路径的问题。如果此时将图片资源直接放置在项目内，再使用相对路径访问，问题当然是能够解决，但是随着项目的进行，这样做会导致项目空间不断增大，而且项目的可移植性也会变差，还有安全性的问题。所以，这种方法我们不考虑。

针对自己的个人项目，我在数据库中存放的是图片资源的相对路径，而图片资源是存放在本地磁盘上的，我们知道如果前端想访问图片资源，这个时候必须采用绝对路径才可以访问。此时，我想到的解决方法是，可以在后台通过拼接得到图片资源的绝对路径，这样在前端自然可以是访问的，但是当项目后续不断迭代，图片资源不断增加，这种方法会影响到项目整体运行的性能，也会影响到用户访问的体验。所以，这种方法我们也不考虑。

经过查阅相关资料，我们可以利用服务器Tomcat的docBase和path属性，完成对图片资源相对路径的转换。具体做法是，首先找到Tomcat安装的根目录，然后修改conf子目录下的server.xml文件，找到Host节点，并在节点内增加以下配置：

<Context docBase="E:\Program\images\upload" path="/upload"/>

docBase属性：表示图片资源存放的本地磁盘位置；

path属性：表示需要转换的图片资源相对路径的前缀；

例如，我在数据库中存放的图片资源相对路径地址是：\upload\item\headline\1.jpg

经过服务器的转换后，就变为了：E:\Program\images\upload\item\headline\1.jpg

经过测试，通过浏览器是可以成功访问到图片的，效果如下图所示：

注意：这里，如果是使用IntelliJ IDEA 工具的小伙伴们，在Tomcat服务器设置栏中需要勾选“Deploy applications configured in Tomcat instance”，如果是使用Eclipse工具，那就不需要作修改，直接就可以访问了。

另外，对于使用IntelliJ IDEA 工具，还有第二种方法，设置Tomcat服务器的虚拟路径，即在Deployment中引入图片资源存放的本地路径，再设置图片资源相对路径的前缀，具体做法如下图所示：

经过上述设置，我们在前端就可以通过相对路径，完成对本地图片资源的访问啦！

---

到达文末了，十分感谢小伙伴们的阅读哈，如果您对我的文章有什么意见或者建议，也欢迎您来进行评论，私信我也可以哈！代码如诗，小伙伴们和我一起努力加油，做持续学习者！：）