vue3 设置静态资源图片

vue3中使用的是vite打包工具，不是webpack，所以静态资源引入的时候，不能使用require（）

使用new URL（'图片的本地地址',import.meta.url）.href

const SearchList = [
  {
    url: new URL('@/assets/img/abc.png', import.meta.url).href
  },
  {
    url: new URL('@/assets/img/cba.png', import.meta.url).href
  },
  {
    url: new URL('@/assets/img/bca.png', import.meta.url).href
  },
]

<div>
  <img :src='item.url' v-for='(item,index) in SearchList' :key='index'>  
</div>

<div class="light-green">
  <n-image width="100%" height="100%" :src="getUrl()"></n-image>
</div>

const getUrl = () => {
  return new URL(`@/assets/images/mm.jpg`,import.meta.url).href
}