vue3动态获取静态资源

cv方法

/**
 * 获取静态资源
 */
export const getAssetsFile = (url: string): string => {
  return new URL(`/src/assets/img/${url}`, import.meta.url).href
}

使用

<div class="banner">
      <div class="combination" v-for="item in list" :key="item.index" @click="handelCombination(item)">
        <img :src="getAssetsFile(item.img)" alt="" />
      </div>
    </div>


import { getAssetsFile } from '@/utils/index'

const list = ref([
  { name: '白银组合包', img: 'Exclusivevideo/by.png', index: 3 },
  { name: '黄金组合包', img: 'Exclusivevideo/hj.png', index: 5 },
  { name: '铂金组合包', img: 'Exclusivevideo/bj.png', index: 8 },
  { name: '钻石组合包', img: 'Exclusivevideo/zs.png', index: 12 }
])

效果