vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法
更新時(shí)間：2018年10月17日 10:00:10 作者：不吃魚(yú)的貓咪
這篇文章主要為大家詳細(xì)介紹了vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
一. 加載本地圖片
1.圖片目錄
2. 在data中配置圖片路徑
data() {
return {
formData: {
avatar: require('@/assets/icon1524737568182.png'),
motto: 'xxxxxxxxxx'
},
routers: this.$router.options.routes
}
}
3. 在需要的地方引入圖片
<div class="avatar"><img :src="formData.avatar" alt=""></div>
二. 加載請(qǐng)求獲取到的圖片
1.配置文檔build/webpack.base.conf.js
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('images/[name].[hash:7].[ext]')
}
},
2.圖片一類的靜態(tài)文件，應(yīng)該放在這個(gè)static文件夾下，這個(gè)文件夾下的文件（夾）會(huì)按照原本的結(jié)構(gòu)放在網(wǎng)站根目錄下。這時(shí)我們?cè)偃ナ褂?static絕對(duì)路徑，就可以訪問(wèn)這些靜態(tài)文件了。
3.請(qǐng)求數(shù)據(jù)
created() {
const that = this
this.request({
url: '/sysInfoFront/list',
method: 'get'
}).then(function(res) {
const resData = res.data
if (resData.code === 100) {
const avatear = resData.data.avater
resData.data.avatar = avatear
that.formData = resData.data
}
})
},
請(qǐng)求的結(jié)果：
4.在需要的地方引入圖片
<div class="avatar"><img :src="formData.avatar" alt=""></div>
兩種方式的最終圖片顯示效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue基于echarts實(shí)現(xiàn)立體柱形圖
這篇文章主要為大家詳細(xì)介紹了vue基于echarts實(shí)現(xiàn)立體柱形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了Vue中使用Teleport的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
el-form 多層級(jí)表單的實(shí)現(xiàn)示例
這篇文章主要介紹了el-form 多層級(jí)表單的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要為大家介紹了c++游戲教程使用easyx實(shí)現(xiàn)大飛機(jī)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了淺談vue2的$refs在vue3組合式API中的替代方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
本篇文章主要介紹了Vue中保存用戶登錄狀態(tài)實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。、2017-06-06
vue3 axios 實(shí)現(xiàn)自動(dòng)化api配置詳解
這篇文章主要為大家介紹了vue3 axios 實(shí)現(xiàn)自動(dòng)化api配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果完整實(shí)例
在實(shí)際項(xiàng)目開(kāi)發(fā)中,我們經(jīng)常會(huì)遇到選項(xiàng)卡切換,對(duì)于一個(gè)前端工程師來(lái)說(shuō),組件化/模塊化開(kāi)發(fā)是一種必備的行為規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的相關(guān)資料,需要的朋友可以參考下2023-05-05
VUE項(xiàng)目調(diào)用高德地圖的詳細(xì)步驟
要在Web頁(yè)面中加入地圖,我推薦你使用高德地圖JSAPI,下面這篇文章主要給大家介紹了關(guān)于VUE項(xiàng)目調(diào)用高德地圖的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
詳解vue-admin和后端(flask)分離結(jié)合的例子
本篇文章主要介紹了詳解vue-admin和后端(flask)分離結(jié)合的例子，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02