vue3+vite使用assets图片图片

记录：vue3+vite动态使用图片

1.首先建立utils.ts文件进行封装

// 获取assets静态资源
export const getAssetsFile = (url: any, flag: any=false) => {
  const imgUrl:any = new URL(`../assets/${url}`, import.meta.url).href
  if (flag) {
    return {
      backgroundImage: `url(${imgUrl})`
    }
  } else {
    return imgUrl
  }
}

2.在index.vue中引用 

import { getAssetsFile } from '@config/utils'

img图片进行使用

<img v-for="(item, idx) in customOneData" :key="idx" :src="getAssetsFile(`homeImg/${item}.png`)" />

背景图进行使用

<div v-for='(item,idx) in bannerData' :key="idx">
  <div :style="getAssetsFile(`homeImg/${item.imgUrl}.png`, true)"></div>
</div>