vue根据后台字段动态显示图片

说明

• 之前搜了很多，有通过把每个图片展示通过状态控制显示的
  有通过require每个图片通过状态控制显示的
  要是数量少还好说，数量多了这种方法肯定是要放弃的
• 本事例就以银行图标显示为例，根据后台返回银行类型字段显示本地对应银行图标

  具体实现

  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
    })
  }
}

这样就实现了图片的动态加载，欢迎指正~