前端Vue頁面中展示本地圖片簡(jiǎn)單代碼示例
更新時(shí)間：2023年12月18日 10:49:28 作者：chuyufengling
今天遇到一個(gè)在vue文件中引入本地圖片的問題,于是有了這篇文章,本文主要給大家介紹了關(guān)于前端Vue頁面中展示本地圖片的相關(guān)資料,需要的朋友可以參考下
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="imgUrl" label="圖片">
<template v-slot="scope">
<img :src= "http://localhost:8888/image/ ' + scope.row.imgUrl" />
</template>
</el-table-column>
</el-table>
//tableData是從數(shù)據(jù)庫查詢得到的數(shù)據(jù)
//scopre.row.imgUrl是圖片的url地址,在這個(gè)項(xiàng)目中為圖片在數(shù)據(jù)庫中存儲(chǔ)的名字
//這個(gè)是向后端獲取數(shù)據(jù)的請(qǐng)求，得到數(shù)據(jù)之后將數(shù)據(jù)賦值給tableData
const initProductList=async()=>{
const res = await axios.post("image/list",queryForm.value)
tableData.value = res.data.orderList;
console.log("tableData is",tableData)
total.value = res.data.total;
}
initProductList();
//數(shù)據(jù)打印出來如下圖所示
我們使用<img>標(biāo)簽展示圖片，src屬性設(shè)置成圖片請(qǐng)求路徑
"http://localhost:8888/image/img.jpg"的格式，也就是會(huì)向后端發(fā)送這個(gè)請(qǐng)求獲取圖片。
<img :src= "http://localhost:8888/image/ ' + scope.row.imgUrl" />
但是圖片是存放在本地的某個(gè)文件里，那如何才能找到呢？
這就需要對(duì)這個(gè)請(qǐng)求的路徑進(jìn)行映射，以找到真正的存放圖片的地址。
我們需要寫一個(gè)配置類，添加如下的方法
@Configuration
public class WebAppConfigurer implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/image/**").addResourceLocations("file:D:\\img\\");
/*
在這段代碼中，addResourceHandlers方法用于添加資源處理器。ResourceHandlerRegistry對(duì)象用于注冊(cè)資源處理器，并指定資源的訪問路徑和存放位置。
/image/**對(duì)應(yīng)的資源就放在D盤的img目錄下,通過這樣的配置當(dāng)前端發(fā)送
http://localhost:8888/image/123.jpg時(shí)，應(yīng)用程序會(huì)將請(qǐng)求映射到本機(jī) D:\img\123.jpg路徑下的文件，并將文件返回給前端。
如果是Linux系統(tǒng)，則不加盤符
*/
}
}總結(jié)
到此這篇關(guān)于前端Vue頁面中展示本地圖片的文章就介紹到這了,更多相關(guān)前端Vue展示本地圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)詳解
element-ui中有詳細(xì)的各種表格及表格方法,下面這篇文章主要給大家介紹了關(guān)于Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
Vue中使用 Echarts5.0 遇到的一些問題(vue-cli 下開發(fā))
這篇文章主要介紹了Vue中使用 Echarts5.0 遇到的一些問題(vue-cli 下開發(fā))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vscode中的vue項(xiàng)目報(bào)錯(cuò)Property ‘xxx‘ does not exist on type ‘Combin
這篇文章主要介紹了vscode中的vue項(xiàng)目報(bào)錯(cuò)Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly...Vetur（2339），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
本篇文章主要介紹了通過命令行生成vue項(xiàng)目框架的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
vue-cli-service?build?自定義參數(shù)方式
這篇文章主要介紹了vue-cli-service?build?自定義參數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
深入淺析Vue不同場(chǎng)景下組件間的數(shù)據(jù)交流
探通過本篇文章給大家探討不同場(chǎng)景下組件間的數(shù)據(jù)“交流”的Vue實(shí)現(xiàn)方法，感興趣的朋友一起看看吧2017-08-08
Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡(jiǎn)單方法
這篇文章主要給大家介紹了關(guān)于Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡(jiǎn)單方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳解
這篇文章主要給大家介紹了關(guān)于vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳?shù)南嚓P(guān)資料,Naive?UI是一個(gè)基于Typescript開發(fā)的針對(duì)Vue3開發(fā)的UI組件庫,由TuSimple(圖森未來)公司開發(fā)并開源,需要的朋友可以參考下2023-08-08
Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）
vue項(xiàng)目中點(diǎn)擊router-link標(biāo)簽鏈接都屬于聲明式導(dǎo)航。vue項(xiàng)目中編程式導(dǎo)航有this.$router.push(),this.$router.replace(),this.$router.go()???????。這篇文章主要介紹了Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）2022-12-12
VUE使用canvas繪制管線管廊實(shí)現(xiàn)思路
這篇文章主要為大家介紹了VUE使用canvas繪制管線管廊實(shí)現(xiàn)思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04