记录: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>