Vue3加载本地assets图片

之前在Vue2中使用require来获取

let imgs = reactive([
  require('@/assets/img/index/index1.jpg'),
  require('@/assets/img/index/index2.jpg'),
  require('@/assets/img/index/index3.jpg'),
  require('@/assets/img/index/index4.jpg'),
  require('@/assets/img/index/index5.jpg'),
  require('@/assets/img/index/index6.jpg'),
  require('@/assets/img/index/index7.jpg'),
  require('@/assets/img/index/index8.jpg')
])      

但是在vue3中报错了~~~ require is not defined

然后想使用vue3中的import.meta.glob 动态导入试试，发现还是不行，404

let imgs = reactive([
  import.meta.glob('../../assets/img/index/*')['../../assets/img/index/index1.jpg'],
  import.meta.glob('../../assets/img/index/*')['../../assets/img/index/index2.jpg'],
  import.meta.glob('../../assets/img/index/*')['../../assets/img/index/index3.jpg'],
  import.meta.glob('../../assets/img/index/*')['../../assets/img/index/index4.jpg'],
  import.meta.glob('../../assets/img/index/*')['../../assets/img/index/index5.jpg'],
  import.meta.glob('../../assets/img/index/*')['../../assets/img/index/index6.jpg'],
  import.meta.glob('../../assets/img/index/*')['../../assets/img/index/index7.jpg'],
  import.meta.glob('../../assets/img/index/*')['../../assets/img/index/index8.jpg'],
])      

正确的使用方式： 

引入图片路径参与编译

import img1 from '@/assets/img/index/index1.jpg'
import img2 from '@/assets/img/index/index2.jpg'
import img3 from '@/assets/img/index/index3.jpg'
import img4 from '@/assets/img/index/index4.jpg'
import img5 from '@/assets/img/index/index5.jpg'
import img6 from '@/assets/img/index/index6.jpg'
import img7 from '@/assets/img/index/index7.jpg'
import img8 from '@/assets/img/index/index8.jpg'

let imgs = reactive([img1, img2, img3, img4, img5, img6, img7, img8])