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
}

使用

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

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

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。