nuxt3获取静态图片公用方法

utils/getAssetsImage.ts

// 动态获取图片
export function getAssetsImage(src: string | undefined): string {
    if (!src)
        return ""
    const assets = import.meta.glob("~/assets/image/**/*", { eager: true, import: "default" })
    return assets[`/assets/image/${src}`] as string
}

export function getAssetsIcon(src: string | undefined): string {
    if (!src)
        return ""
    const assets = import.meta.glob("~/assets/icons/**/*", { eager: true, import: "default" })
    return assets[`/assets/icons/${src}`] as string
}

使用

html

<script setup>
import getAssetsImage from "~/utils/getAssetsImage"
</script>

<template>
    <img :src="getAssetsImage(card.bg)" alt="">
</template>