当前位置:网站首页>V-for img SRC rendering fails

V-for img SRC rendering fails

2022-07-07 11:08:00 Have a good time I

Problem description :
An array is defined , The path with pictures in the array , Use for When the page is rendered in a loop , The picture path is right, but the picture does not show .
terms of settlement : The path of the image in the array should be written as follows :

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

Write when rendering

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

Specific examples

<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: ' home page ' },
	        {
    
	          key: '/account/consumptive-volume',
	          name: 'account/consumptiveVolume',
	          src: require('@/assets/image/account/consumptiveVolume.png'),
	          title: ' Card and voucher management '
	        },
	        {
    
	          key: '/account/order',
	          name: 'account/order',
	          src: require('@/assets/image/account/order.png'),
	          title: ' Order management '
	        },
	        {
    
	          key: '/account/bill',
	          name: 'account/bill',
	          src: require('@/assets/image/account/bill.png'),
	          title: ' Transaction records '
	        },
	        {
    
	          key: '/account/community',
	          name: 'account/community',
	          src: require('@/assets/image/account/community.png'),
	          title: ' My circle '
	        },
	        {
    
	          key: '/account/message',
	          name: 'account/message',
	          src: require('@/assets/image/account/message.png'),
	          title: ' Message center '
	        },
	        {
    
	          key: '/account/base-setting',
	          name: 'account/baseSetting',
	          src: require('@/assets/image/account/baseSetting.png'),
	          title: ' Account Center '
	        }
	      ]
	     }
	     }
      ```
原网站

版权声明
本文为[Have a good time I]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/02/202202130619539823.html