vue src動態(tài)加載請求獲取圖片的方法
更新時間：2018年10月17日 10:00:10 作者：不吃魚的貓咪
這篇文章主要為大家詳細介紹了vue src動態(tài)加載請求獲取圖片的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一. 加載本地圖片
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>
二. 加載請求獲取到的圖片
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)該放在這個static文件夾下，這個文件夾下的文件（夾）會按照原本的結(jié)構(gòu)放在網(wǎng)站根目錄下。這時我們再去使用/static絕對路徑，就可以訪問這些靜態(tài)文件了。
3.請求數(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
}
})
},
請求的結(jié)果：
4.在需要的地方引入圖片
<div class="avatar"><img :src="formData.avatar" alt=""></div>
兩種方式的最終圖片顯示效果
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了使用vue實現(xiàn)加載頁，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue中使用vue-touch插件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue2.0移動端滑動事件vue-touch的實例代碼,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue常用的修飾符及應(yīng)用場景解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue多級復(fù)雜列表展開/折疊及全選/分組全選實現(xiàn)
這篇文章主要介紹了vue多級復(fù)雜列表展開/折疊及全選/分組全選實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
vue實現(xiàn)的微信機器人聊天功能案例【附源碼下載】
這篇文章主要介紹了vue實現(xiàn)的微信機器人聊天功能,結(jié)合實例形式分析了基于vue.js的微信機器人聊天相關(guān)界面布局、ajax交互等操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了uni-app 的自定義組件，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
下面小編就為大家分享一篇關(guān)閉Vue計算屬性自帶的緩存功能方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
又一款MVVM組件 Vue基礎(chǔ)語法和常用指令（1）
這篇文章主要為大家分享了一款MVVM組件，詳細介紹了Vue基礎(chǔ)語法和常用指令,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11