vue swiper本地图片显示问题

阳光穿透心脏的1/2处 2021-07-25 20:06 648阅读 0赞

## vue swiper本地图片显示问题 ##

![在这里插入图片描述][20201116212014568.gif_pic_center]  
要点：非/static路径下，本地图片路径需要添加require(’~imgurl’)

data() { 
          return { 
             //图片路径
             swiperImg: [
            { srcs: require('@/assets/img/swiper/1.jpg')},
            { srcs: require('@/assets/img/swiper/2.jpg')},
            { srcs: require('@/assets/img/swiper/3.jpg')},
          ]
          }
        },

父组件图片路径渲染：

父组件导入子组件：

import Xswiper from '@/components/common/Swiper'
    	
      export default { 
        name: "Home",
        data: { },
        components: { 
          Xswiper
        },
        data() { 
          return { 
            result: null,
             //图片路径
             swiperImg: [
            { srcs: require('@/assets/img/swiper/1.jpg')},
            { srcs: require('@/assets/img/swiper/2.jpg')},
            { srcs: require('@/assets/img/swiper/3.jpg')},
          ]
          }
        },
       
      }

子组件：

[20201116212014568.gif_pic_center]: /images/20210725/5d7e66e3c6c9430aa9dbb0f655aa964b.png