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


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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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、 不加载图片显示空白，本地图片路径不加载等
在用 的时候，刚开始不熟悉的会遇到图片空白问题，下面讲讲该怎么用。
首先要引入才能使用，先说某个页面引入：

1
2
3
4
5
6
7
8
9
  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：

1
2
3
4
5
6
7
8
9
10
11
12
13
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')

// 然后就可以在任何一个页面正常使用

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

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

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