前端vue如何通過URL訪問存儲在服務器或磁盤的圖片
更新時間：2024年02月06日 10:19:04 作者：keep?the
在Vue中,通常需要將圖片存儲在服務器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲在服務器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下
前言
這里前端訪問使用的是element
一、前端
說明：
scope.row.img 是后端返回的URL數(shù)組
<el-table-column sortable prop="img" label="圖片" width="200">
<template slot-scope="scope">
<el-image style="width: 100px; height: 100px" :src="setImgUrl(scope.row)" :preview-src-list="scope.row.img"></el-image>
</template>
</el-table-column>
--------------------------------------------------------------------
setImgUrl方法
/設置產(chǎn)品第一張圖片
setImgUrl(row) {
if(row.img.length != 0) {
return row.img[0]
}else {
return ""
}
}二、后端
1.配置文件
#文件上傳保存路徑 file.path.localPath=D:/Admind/java/project/crm/src/main/resources/images/
2.攔截器配置
注意：如果配置有其他的攔截器，一定要排除“/images/**”路徑，不要攔截它
@Configuration
public class InterceptorConfig implements WebMvcConfigurer {
@Value("${file.path.localPath}")
private String path;
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//圖片訪問
registry.addResourceHandler("/" + FileUtils.getPathLastName(path) + "/**").addResourceLocations("file:" + path + "/");
}
}FileUtils工具類
工具類調(diào)用getPathLastName方法的目的是獲取路徑的最后一個目錄名，作用是：配置文件存儲圖片的path的路徑修改的時候，也同樣能夠訪問得到，不用我們?nèi)サ酱a中進行修改，降低了冗余度。
public class FileUtils {
/**
* 獲取文件路徑最后的名
* @return
*/
public static String getPathLastName(String path) {
int i = path.lastIndexOf("/") + 1;
return path.substring(i);
}
}3.訪問效果
我的圖片存在位置：
總結(jié)
到此這篇關(guān)于前端vue如何通過URL訪問存儲在服務器或磁盤的圖片的文章就介紹到這了,更多相關(guān)vue訪問存儲服務器的圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue中, v-slot 指令用于定義插槽的模板內(nèi)容,v-slot 指令可以用于標簽或組件標簽上,以便在子組件中使用插槽,這篇文章主要介紹了vue v-slot指令,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了詳解vuex的簡單使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue動態(tài)配置模板 ''component is''代碼
這篇文章主要介紹了vue動態(tài)配置模板 'component is'代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
Vue CLI項目 axios模塊前后端交互的使用(類似ajax提交)
這篇文章主要介紹了Vue-CLI項目-axios模塊前后端交互的使用詳解(類似ajax提交),本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了Vue調(diào)用手機相機及上傳，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
本篇文章主要介紹了vue-cli中的webpack配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
最近在寫vue的一個項目要實現(xiàn)過渡的效果,雖然vue動畫不是強項,庫也多,但是基本的坑還是得踩扎實,下面這篇文章主要給大家介紹了關(guān)于Vue中實現(xiàn)過渡動畫效果的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue.js實現(xiàn)插入數(shù)值與表達式的方法分析
這篇文章主要介紹了vue.js實現(xiàn)插入數(shù)值與表達式的方法,結(jié)合實例形式分析了vue.js常見的3種插入數(shù)值實現(xiàn)方式,并總結(jié)了vue.js插值與表達式相關(guān)使用技巧,需要的朋友可以參考下2018-07-07
Vue3解決ElementPlus自動導入時ElMessage無法顯示的問題
這篇文章主要介紹了Vue3解決ElementPlus自動導入時ElMessage無法顯示的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在本文里小編給大家分享了一篇關(guān)于vue中實現(xiàn)上傳文件給后臺的實例內(nèi)容，有需要此功能的可以學習參考下。2019-08-08