IDEA | Idea项目设置图片虚拟目录分析和设置

author: Nathannie
date: 2022-04-14-20:26

前言

学习ssm项目，需要获取数据库图片地址展示在前端，数据库图片资源来自本地硬盘，但图片的访问路径是相对路径，而图片真实路径是绝对路径，因此需要对相对路径处理，使得访问图片的相对路径最终访问到图片的绝对路径，能正确的显示。

参考视频中使用的IDE是Eclipse,使用方式是在配置文件server.xml中设置虚拟目录,将访问路径关键字替换为图片真实路径。而使用IntelliJ Idea可以直接在编辑器中设置，不需要进入到配置文件中。

分析

要求：

• 确定图片的访问路径（相对路径）

• 确定图片的真实路径（绝对路径）

如图片的访问路径为： /upload/images/item/shopcategory/2017061223272255687.png，而图片的真实路径为：D:\projectdev\image\upload\images\item\shopcategory\2017061223272255687.png。

要想正确访问图片，只需要补全前面的路径内容（D:\projectdev\image）,使用虚拟目录方式将/upload替换为D:\projectdev\image\upload,这样访问/upload就是在访问D:\projectdev\image\upload。整体上访问/upload/images/item/shopcategory/2017061223272255687.png就是访问D:\projectdev\image\upload\images/item/shopcategory/2017061223272255687.png，这样图片就能正常访问并展示。

注： \或/只是路径分隔符，不同操作系统有所不同，此时图片储存在windows操作系统中，系统路径为\，而访问路径以http协议访问，分隔符为/。只要确保虚拟目录后的内容/images/item/shopcategory/2017061223272255687.png和实际图片地址\images\item\shopcategory\2017061223272255687.png结构对应即可。

图片的访问路径：

图片的实际路径：

设置方式1：在配置文件中设置文件的虚拟目录

使用配置文件方式（server.xml)就很简单了（但是不建议），建议使用热部署方式设置虚拟目录，参考视频第三个方式^[1]。

在Idea生成的Tomcat配置实例c9943776-5294-4ecd-93c9-d47c0ec22629下的\conf\Catalina\localhost下创建一个文件，文件名为虚拟目录upload,在文件中写入Context配置：

<Context path="/upload" docBase="D:\projectdev\image\upload" />

实际上这个方式可以直接在Idea编辑器中设置。

关于Idea生成的Tomcat配置实例：xxxxxxxxxxxxxxxxxx

设置方式2：在Idea中设置文件的虚拟目录

参考：https://www.jianshu.com/p/e1a38a08ecdd

关于tomcat服务器项目文件访问方式及虚拟目录可以参看javaweb基础视频^[2]有关

的讲解。

1、点击Idea菜单中点击Edit configuration。

2、在面板中点击Deployment,然后点击下方+（不同版本idea可能界面选项不同），选择External Source,从硬盘中选择一个路径作为图片的储存路径（也即是用于替换虚拟目录的路径），这里是D:\projectdev\image\upload,所以选择upload目录，在点击OK完成设置。

3、设置文件的访问的虚拟目录为/upload，（Application Context就是设置文件访问的虚拟目录，一般用于项目的虚拟目录设置，当然可以设置其他文件）。最后点击Apply,OK完成设置。

参考

---

1. https://www.bilibili.com/video/BV1qv4y1o79t?p=228&t=731.6 ↩︎

2. https://www.bilibili.com/video/BV1qv4y1o79t?p=228 ↩︎