vueバックグラウンドフィールドに基づいて画像を動的に表示


説明
  • 以前にいろいろ検索しましたが、各画像を表示することによって状態制御によって表示されるものがあります.
  • 本例では銀行アイコン表示を例に、バックグラウンド戻り銀行タイプフィールドに基づいてローカル対応銀行アイコン
  • を表示する.
    具体的な実装
    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
        })
      }
    }
    

    これで画像のダイナミックロードが実現しますので、ご指摘をお待ちしております~