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
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容