解决v-for img src 渲染不出来以及动态拼接不显示的问题

问题描述：
定义了一个数组，数组里面装的有图片的路径，使用for循环渲染页面时，图片路径对但是图片不显示。
解决办法：数组里面图片的路径要写成如下：

image:require('../assets/img/login.png')

渲染的时候要写

<img :src="item.image" />

具体事例

<a-menu
        v-for="(v, i) in navData"
        :key="i"
        :default-selected-keys="['/account/home']"
        :selected-keys="[v.key]"
        mode="inline"
        type="inner"
        class="accout_menu"
        @openChange="onOpenChange"
      >
        <a-menu-item key="v.key">
          <router-link :to="{ name: v.name }">
            <img :src="v.src" class="menu_account_image" />
            <span class="menu_account_title">{{ v.title }}</span>
          </router-link>
        </a-menu-item>
      </a-menu>

 data() {
 return{
	 navData: [
	        { key: '/account/home', name: 'account/home', src: require('@/assets/image/account/home.png'), title: '首页' },
	        {
	          key: '/account/consumptive-volume',
	          name: 'account/consumptiveVolume',
	          src: require('@/assets/image/account/consumptiveVolume.png'),
	          title: '卡券管理'
	        },
	        {
	          key: '/account/order',
	          name: 'account/order',
	          src: require('@/assets/image/account/order.png'),
	          title: '订单管理'
	        },
	        {
	          key: '/account/bill',
	          name: 'account/bill',
	          src: require('@/assets/image/account/bill.png'),
	          title: '交易记录'
	        },
	        {
	          key: '/account/community',
	          name: 'account/community',
	          src: require('@/assets/image/account/community.png'),
	          title: '我的圈子'
	        },
	        {
	          key: '/account/message',
	          name: 'account/message',
	          src: require('@/assets/image/account/message.png'),
	          title: '消息中心'
	        },
	        {
	          key: '/account/base-setting',
	          name: 'account/baseSetting',
	          src: require('@/assets/image/account/baseSetting.png'),
	          title: '账号中心'
	        }
	      ]
	     }
	     }

动态的怎么办？
调用自定义方法！

 <div class="item_box" v-for="(item,index) in homeData" :key="index">
 				<!-- <img :src="`@/assets/images/home/${item.imgUrl}.png`" class="item_img"/> -->这样写也不行哦，因为动态渲染需要加入require，但是require无法直接字符串拼接，所以需要自定义一个方法
 				<img :src="bindImg(item.imgUrl)" class="item_img"/>
 				<!-- <img src="@/assets/images/home/house_owner.png" class="item_img"/> -->
 				
 				<div class="item_title">{{ item.title }}</div>
 				<div class="item_title2">{{ item.title2 }}</div>
 				<div class="item_title3">{{ item.text }}</div>
 			</div>

methods:{
	bindImg(url){
			return require('@/assets/images/home/'+url+'.png');
		}
	}

数据引入

//  @/assets/images/home/house.png
const homeData = [
	{
		id: 1,
		imgUrl: 'house.png',
		title: '管理',
		title2: 'management',
		text: '描述'
	},
	
];

export {
	homeData,
}