SpringBoot-虛擬路徑配置+載入多個本地圖片圖片
SpringBoot-虛擬路徑配置
實現WebMvcConfigurer介面,並且重寫addResourceHandlers方法
@Component public class MyConfiguration implements WebMvcConfigurer{ /** * 虛擬路徑配置 * @param registry */ @Override public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/myimg/**").
WebMvcConfigurer.super.addResourceHandlers(registry);
}
}
注：
/myimg/**: 相當於 別名的意思
file:G:/upload/: 本地檔案的路徑
以上配置 完後就可以在頁面中使用/myimg/訪問本地資源了
SpringBoot-載入多個本地圖片圖片
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<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負擔非常重，瀏覽器很容易卡住甚至崩潰。