(vant)使用vant轮播图无法使用本地图片

  • 使用vant框架的轮播图组件时,直接引用本地图片会无法显示。解决办法是在数据外加上require
    eg:
<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in img" :key="item">
        <van-image :src="item"/>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img:[
        require("@/assets/images/5a2e2dba4a4c1bef4c4ee4e2f712449f.jpeg"),
        require("@/assets/images/3767a25c2a5654b3cfa98e7368189177.jpeg"),
        require("@/assets/images/0791d41f4404d380028b8f2c6d594967.jpeg"),
      ]
    }
  }
}
</script>

<style>

</style>

效果:
(vant)使用vant轮播图无法使用本地图片_第1张图片

你可能感兴趣的:(#,框架及插件)