SpringBoot-虚拟路径配置+加载多个本地图片图片
SpringBoot-虚拟路径配置
实现WebMvcConfigurer接口,并且重写addResourceHandlers方法
@Component public class MyConfiguration implements WebMvcConfigurer{ /** * 虚拟路径配置 * @param registry */ @Override public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/myimg/**").
addResourceLocations("file:G:/upload/");
WebMvcConfigurer.super.addResourceHandlers(registry);
}
}
注：
/myimg/**: 相当于 别名的意思
file:G:/upload/: 本地文件的路径
以上配置 完后就可以在页面中使用/myimg/访问本地资源了
SpringBoot-加载多个本地图片图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="height: 100%">
<table width="100%" border="1px">
<tr>
<td width="50px">审核材料</td>
<td width="610px"><span id="tupian"></span></td>
</tr>
</table>
<input type="hidden" id="data" value=",2ab5ae83-5a97-4d74-8aa6-0cca116de709&51.jpg,98f7547f-e89a-4006-8828-e471b2125d48&61.jpg" />
</body>
<script type="text/javascript">
var data=document.getElementById("data").value;
console.log(data);
var arr=new Array();
arr=data.split(",");
console.log(arr);
var html="";
for(var i=1;i<arr.length;i++){
console.log(arr[i]);
html+="<img style='width:200px;height:200px' src='/myimg/"+arr[i]+"'>";
}
document.getElementById("tupian").innerHTML=html;
</script>
</html>
注：
因为我上传图片的时候是个个图片的名字拼接成的，
所以要先利用data.split(",");截取个个图片的名字，赋值给 arr 数组，
然后循环遍历，组合成一个由个个图片的img标签拼接的字符串html，
最后把他利用id传到HTML页面上。
不过这个方法适合少量图片加载，大量的图片加载不推荐使用，那样会造成浏览器运行js负担非常重，浏览器很容易卡住甚至崩溃。
