vue3.x 中使用 vant ＜van-image＞图片不显示的问题

背景
今年发布了Vue3版本，新特性还挺多，有一项是按需引入组件，减小包体积的同时增加灵活度，很赞！但也引发了UI库跟不上版本的问题，比如 Element UI库，是基于vue2.x 的，目前还不支持vue3,是不是很头疼？不怕，有赞UI库 vant 已经支持 vue3了！

相信有挺多小伙伴会遇到以下问题：
1、 安装了vant，该怎么按需引入？
2、在哪个页面组件引入，怎么全局引入？
3、<van-image/> 不加载图片显示空白，本地图片路径不加载等

解决方案：
1、 安装了vant，该怎么按需引入？

一般我们会在 main.js 全局引入vant，然后就可以在任何页面使用 vant

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { Divider, Popup, Overlay, Loading } from 'vant'  // vant 需要什么就引入什么
import 'vant/lib/index.css' // vant 全局引入样式

const app = createApp(App) // 创建实例
app.use(Divider).use(Popup).use(Overlay).use(Loading)  // vant 挂载
app.use(router)
app.use(store)

app.mount('#app')

2、在哪个页面组件引入，怎么全局引入？
上面已经讲了怎么全局引入vant, 现在讲在某个 页面引入vant

<script>
import { reactive, onMounted, toRefs } from 'vue'
import { Toast } from 'vant'   // 按需引入

export default {
  name: 'Home',
  components: {
  },

setup() {
    const state = reactive({
      categoryList: [
        {
          name: '超市',
          categoryId: 1001
        }, {
          name: '服饰',
          categoryId: 1003
        }, {
          name: '全球',
          categoryId: 1002
        }, {
          name: '全部',
          categoryId: 1010
        }
      ]
    })
    onMounted(() => {
      console.log("加载完成");
    })

    const tips = () => {
      Toast('敬请期待');
    }

    return {
      ...toRefs(state),
      tips
    }
  },
}
</script>

3、<van-image/> 不加载图片显示空白，本地图片路径不加载等
在用<van-image/> 的时候，刚开始不熟悉的会遇到图片空白问题，下面讲讲该怎么用。
首先要引入才能使用，先说某个页面引入：

  import { Image as VanImage } from 'vant'

  components: {
    [VanImage.name]: VanImage
  },
//  注意 [VanImage.name]: VanImage， 不要去改 

 // 然后就可以正常使用 `<van-image/>` 
 <van-image width="100" height="100" fit="contain" :src="require('../assets/logo.png')" />

然后说说全局引入：
main.js：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vant/lib/index.css'; // 全局引入样式
import { Image as VanImage } from 'vant';

const app = createApp(App) // 创建实例
app.use(router)
app.use(store)
app.use(VanImage);

app.mount('#app')

// 然后就可以在任何一个页面正常使用 <van-image/>

注意点
本地图片不加载解决方法：

v-bind:src=“require(’…/assets/logo.png’)”
简写为：:src=“require(’…/assets/logo.png’)”

更详细的使用说明可以查看官方文档：

https://vant-contrib.gitee.io/vant/next/#/zh-CN/image?anchor=dai-ma-yan-shi

如果您有更好的想法和建议，欢迎留言讨论噢！