VueCli3，4中src问题

封装tabbar时发现图片显示不出来，检查了下我的图片确实放在assets文件夹下。
检查了下绑定的路径写错没

tabbar: [
        { tabbarImg: "@/assets/img/tabbar/首页.svg", tabbarText: "首页" },
        { tabbarImg: "@/assets/img/tabbar/分类.svg", tabbarText: "分类" },
        { tabbarImg: "@/assets/img/tabbar/购物车.svg", tabbarText: "购物车" },
        { tabbarImg: "@/assets/img/tabbar/我的.svg", tabbarText: "我的" },
      ]

检查没问题，就去网页F12看了下图片路径：

路径还含有@，原封不动，肯定找不到图片。
查阅资料后，得知需要require或者import导入，才能获得动态路径。
import xx from ‘xxxx’ 导入时还要定一个变量来使用，不如require来的快。

tabbar: [
        { tabbarImg: require("@/assets/img/tabbar/首页.svg"), tabbarText: "首页" },
        { tabbarImg: require("@/assets/img/tabbar/分类.svg"), tabbarText: "分类" },
        { tabbarImg: require("@/assets/img/tabbar/购物车.svg"), tabbarText: "购物车" },
        { tabbarImg: require("@/assets/img/tabbar/我的.svg"), tabbarText: "我的" },
      ]

Ps：如果用的是网络地址可以直接写，不用require。
修改后图片显示正常~~

补充：看视频时发现的，在这里补充上。如果引用本地的图片，路径写在html中的src里时，在配置过别名alias后，可以直接使用~加路径即可。
例如

<img src="~assets/img/home/feature.png"  />

就可以正确访问到图片，前提是在vue.config.js（vuecli3,4）中配置别名，如下：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
      }
    }
  }
}