前端vue如何通過(guò)URL訪問(wèn)存儲(chǔ)在服務(wù)器或磁盤的圖片
更新時(shí)間：2024年02月06日 10:19:04 作者：keep?the
在Vue中,通常需要將圖片存儲(chǔ)在服務(wù)器端,并通過(guò)url地址來(lái)訪問(wèn),下面這篇文章主要給大家介紹了前端vue如何通過(guò)URL訪問(wèn)存儲(chǔ)在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下
前言
這里前端訪問(wèn)使用的是element
一、前端
說(shuō)明：
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方法
/設(shè)置產(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) {
//圖片訪問(wèn)
registry.addResourceHandler("/" + FileUtils.getPathLastName(path) + "/**").addResourceLocations("file:" + path + "/");
}
}FileUtils工具類
工具類調(diào)用getPathLastName方法的目的是獲取路徑的最后一個(gè)目錄名，作用是：配置文件存儲(chǔ)圖片的path的路徑修改的時(shí)候，也同樣能夠訪問(wèn)得到，不用我們?nèi)サ酱a中進(jìn)行修改，降低了冗余度。
public class FileUtils {
/**
* 獲取文件路徑最后的名
* @return
*/
public static String getPathLastName(String path) {
int i = path.lastIndexOf("/") + 1;
return path.substring(i);
}
}3.訪問(wèn)效果
我的圖片存在位置：
總結(jié)
到此這篇關(guān)于前端vue如何通過(guò)URL訪問(wèn)存儲(chǔ)在服務(wù)器或磁盤的圖片的文章就介紹到這了,更多相關(guān)vue訪問(wèn)存儲(chǔ)服務(wù)器的圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實(shí)現(xiàn)標(biāo)簽云效果的方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)標(biāo)簽云效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了vue標(biāo)簽云的實(shí)現(xiàn)技巧與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue彈窗如何嵌入其它vue頁(yè)面,實(shí)現(xiàn)方式是將其他頁(yè)面作為組件傳入，在父頁(yè)面將該組件引入到彈框內(nèi)，實(shí)例代碼簡(jiǎn)單易懂需要的朋友可以參考下2022-11-11
以簡(jiǎn)單的樹形組件為案例,實(shí)現(xiàn)在組件中遞歸組件,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)遞歸組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式
本文主要介紹了SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了Vue框架TypeScript裝飾器使用指南小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
使用Bootstrap + Vue.js實(shí)現(xiàn)表格的動(dòng)態(tài)展示、新增和刪除功能
這篇文章主要介紹了使用Bootstrap + Vue.js實(shí)現(xiàn)表格的動(dòng)態(tài)展示、新增和刪除功能,需要的朋友可以參考下2017-11-11
這篇文章主要為大家詳細(xì)介紹了Vue.use源碼，Vue.use方法的引入，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細(xì)介紹了VUE遞歸樹形實(shí)現(xiàn)多級(jí)列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue.js處理API請(qǐng)求失敗的最佳實(shí)踐和策略
在現(xiàn)代Web開發(fā)中,與后端API的交互是不可避免的,然而,網(wǎng)絡(luò)請(qǐng)求是不穩(wěn)定的,可能會(huì)因?yàn)楦鞣N原因失敗,因此,優(yōu)雅地處理API請(qǐng)求失敗的情況是提升用戶體驗(yàn)和應(yīng)用穩(wěn)定性的關(guān)鍵,本文將詳細(xì)介紹在Vue.js中處理API請(qǐng)求失敗的最佳實(shí)踐和策略,需要的朋友可以參考下2024-12-12
Vue實(shí)現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能
這篇文章主要介紹了如何在Vue中實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,在實(shí)現(xiàn)過(guò)程中，需要注意文件的格式和轉(zhuǎn)換方式，以及插件和組件的使用方法和注意事項(xiàng)，需要的朋友可以參考下2023-05-05