vue3中动态引入静态资源

vite：在vue3中动态引入静态资源图片需要使用 new URL(url, import.meta.url)方法

注意：如果作为背景图片，要使用相对路径，不然打包时无法解析

参考： 静态资源处理 | Vite 官方中文文档

const imgUrl = [
  new URL('../src/assets/images/home/home_card_1.png', import.meta.url).href,
  new URL('../src/assets/images/home/home_card_2.png', import.meta.url).href,
  new URL('../src/assets/images/home/home_card_3.png', import.meta.url).href,
  new URL('../src/assets/images/home/home_card_4.png', import.meta.url).href,
  new URL('../src/assets/images/home/home_card_5.png', import.meta.url).href,
  new URL('../src/assets/images/home/home_card_6.png', import.meta.url).href,
]

将图片作为背景图片使用

    <div v-for="(item,index) in growCardList" :key="item.title">
      <div 
        :style="{'backgroundImage':`url(${imgUrl[index]}`}"
        }">
      </div>
    </div>

webpack：通过require动态引入

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