方法一、

<!-- 发起审批 -->
<template>
  <div>
    <div v-for="item in list" :key="item">
        <img
          :src="getImg(item.cardContent)"
          style="
            width: 36px;
            height: 36px;
            vertical-align: middle;
            margin-right: 10px;
          "
        />
    </div>
  </div>
</template>
<script setup>
const list = ref([
  {
    title: '人事审批',
    cardContent: '招聘申请',
  },
  { title: '财务审批', cardContent: '报销' },
  {
    title: '行政审批',
    cardContent: '物品领用',
  },
  {
    title: '其它模板',
    cardContent: '通用审批',
  },
])
const getImg = (cardContent) => {
  let img = new URL(`/src/assets/img/${cardContent}.png`, import.meta.url).href
  return img
}
</script>

方法二、

/**
 * img src动态的获取svg静态图片 (/src/assets/svgs/目录的所有svg图片)
 * name:文件名称
 * 使用方式: <img :src="getSvg(fileName)">
**/
export const getSvg = (name:string) => {
  const path = `/src/assets/svgs/${name}.svg` //拼接文件路径
  const modules = import.meta.globEager(`/src/assets/svgs/*.svg`) //获取该路径下的所有svg文件
  return modules[path]?.default //过滤出需要的sgv图片文件
}