vueバックグラウンドフィールドに基づいて画像を動的に表示
3748 ワード
説明以前にいろいろ検索しましたが、各画像を表示することによって状態制御によって表示されるものがあります. 本例では銀行アイコン表示を例に、バックグラウンド戻り銀行タイプフィールドに基づいてローカル対応銀行アイコン を表示する.
具体的な実装
1、まずテンプレートに画像のラベルを書く.
2、バックグラウンドリターンとその関連ロジック
これで画像のダイナミックロードが実現しますので、ご指摘をお待ちしております~
具体的な実装
1、まずテンプレートに画像のラベルを書く.
<img :src="imgSrc" alt=" ">
2、バックグラウンドリターンとその関連ロジック
data () {
imgSrc: ''
},
created () {
this.getImg()
}
methods: {
getImg () {
this.axios.get('xxxx').then(data => {
//
let bankType = data.bankType
// src
// : webpack , require ,
// static
this.imgSrc = `/static/img/${bankType}.png`
}).catch(err => {
// error
})
}
}
これで画像のダイナミックロードが実現しますので、ご指摘をお待ちしております~