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
}