vue循环img图片路径加载不出来

使用-
使用require引入本地图片路径。
components/select/dictLevelImg.vue

<template>
  <div>
    <img :src="label" alt="">
  </div>
</template>

<script>
export default {
  name: 'DictValue',
  props: {
    value: "",
    prop: {
      type: Object,
      default: () => {
        return {
          key: 'dictValue',
          label: 'dictLabel',
          value: 'dictValue'
        }
      }
    },
  },
  data() {
      return {
         getMiGidata:[
         {code :'1',imgUrl:require('@/assets/levelImag/levelFont/pic1.png')},
         {code :'2',imgUrl:require('@/assets/levelImag/levelFont/pic2.png')}
         ]
      }
    },
  computed: {
    label() {
      let label = 'key错误请修改:' + (this.value === undefined ? '' : this.value)
      const options = this.getMiGidata || []
      const filterList = options.filter((item) => { return item.code == this.value })
      if (filterList[0]) {
        label = filterList[0].imgUrl
      }
      if(!this.value){
        label=""
      }
      return label
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

定义
components/select/index.js

import dictLevelImg from './select/dictLevelImg'

export default {
  install(Vue) {
    Vue.component('dict-Level-img', dictLevelImg)
  }
}

使用

 <dict-Level-img v-model="peojectForm.dataLevel"  />