Vue3 动态渲染本地图片

1、第一种 (本地生效了，线上不生效)

<el-image :src="getImgSrc(item.name)"></el-image>

const getImgSrc = (name) => {
  const url = `../../assets/images/file/icon_${getFileImg(name)}.png`
  return new URL(url, import.meta.url).href
}
// 生产构建时，URL字符串必须是静态，才能分析，转换成打包哈希的地址

2、第二种 (本地、线上都OK)

import defaultImg from '@/assets/images/file/icon_default.png'
import pptImg from '@/assets/images/file/icon_ppt.png'
import excelImg from '@/assets/images/file/icon_excel.png'
import wordImg from '@/assets/images/file/icon_word.png'
import compressImg from '@/assets/images/file/icon_compress.png'
import pdfImg from '@/assets/images/file/icon_pdf.png'

const getImgSrc = (name) => {
  name = getFileImg(name)
  return {
    'ppt': pptImg,
    'excel': excelImg,
    'word': wordImg,
    'compress': compressImg,
    'pdf': pdfImg,
    'default': defaultImg
  }[name] || defaultImg
}