当前接触的项目是前后端分离的,我现在需要将图片文件的路径存在数据库,在前台展示时将数据库的路径拿出来,将服务器上的图片文件展示出来
一开始我的做法是将图片文件放在前端页面代码目录中,然后想到一般情况下,资源文件都是放在服务器上的,然后一个同事(妹子呦)告诉我了一个办法,在tomcat的配置文件中配置一行代码,做一个路径映射
<Context path="" docBase="磁盘:\team_project_store\BI\teamplate_plate\images" reloadable="true" UriEncoding='UTF-8' ></Context></Host>
1、Context指的是web项目;
2、path是虚拟目录,我这里是空字符串,代表根路径,注意哦,这里的根路径不是“/”;
3、docBase是文件实际存放的根目录,映射为path虚拟目录;
4、reloadable="true"表示修改了该文件不用重启就可以实现显示的同步
这里我们前端使用的是layui框架,前端有一个base.js的配置文件,前台动态为img的src赋值,就可以在base.js里面定义整个图片路径前面需要加上的部分
img动态生成的过程用到了上面的变量
//添加img ,存放模板图片
var img = document.createElement("img");
//console.log(userTemps[i].path);
img.src = url_fileImages + userTemps[i].path;
console.log( img.src);
img.setAttribute("name", userTemps[i].id);
img.setAttribute("id", userTemps[i].id);
img.onclick = function(){
var userTempId = this.id;
console.log(userTempId);
}
//console.log(img.src);
div.appendChild(img);
最后图片正常从服务器拿出!!!