require引用静态资源图片的时候报错

这里我们先假设：
静态文件目录：src/assets/images/
我们的目标静态文件在 src/assets/images/home/home_icon.png

<img :src="require('@/assets/images/home/home_icon.png')" />

尝试过require动态引入， 发现报错：require is not defind，这是因为 require 是属于 Webpack 的方法

第一种方式（适用于处理单个链接的资源文件）

import homeIcon from '@/assets/images/home/home_icon.png'

<img :src="homeIcon" />

第二种方式（适用于处理多个链接的资源文件）

推荐，这种方式传入的变量可以动态传入文件路径！！

静态资源处理 | Vite 官方中文文档
new URL() + import.meta.url

这里我们假设：
工具文件目录： src/util/pub-use.ts
pub-use.ts

// 获取assets静态资源
export default  const getAssetsFile = (url: string) => {
   return new URL(`../assets/images/${url}`, import.meta.url).href
}

使用：

<img :src="getAssetsFile('/home/home_icon.png')" />

就可以正确拿到路径了