如何实现HTML img标签动态适配多格式Base64图片渲染？

核心思路 #

• 维护一个扩展名与MIME类型的映射表，替代switch case，后续新增格式只需添加键值对，更易维护
• 获取图片的格式标识（可从文件名提取、后端返回字段获取等），匹配对应MIME类型
• 动态拼接img标签的src属性值

代码实现 #

1. 定义MIME类型映射表

// 图片格式与对应MIME类型的映射，新增格式直接在此添加
const imageMimeMap = {
  png: 'image/png',
  jpg: 'image/jpeg',
  jpeg: 'image/jpeg',
  svg: 'image/svg+xml'
};

2. 编写工具函数获取MIME类型

// 根据格式获取MIME类型，默认返回png类型作为兜底
const getImageMimeType = (format) => {
  const lowerCaseFormat = format?.toLowerCase();
  return imageMimeMap[lowerCaseFormat] || imageMimeMap.png;
};

3. 在组件中使用

// 假设format变量为当前图片的格式（比如从后端接口或文件名解析得到）
const format = 'svg'; // 替换为实际的格式来源

<img
  className={styles.img__box}
  src={`data:${getImageMimeType(format)};base64,${headerIcon}`}
  alt="icon"
/>

补充说明 #

• 如果格式需要从文件名提取（例如logo.jpeg），可以用以下方式获取扩展名：

const fileName = 'logo.jpeg';
const format = fileName.split('.').pop(); // 得到'jpeg'

• 后续新增图片格式时，只需在imageMimeMap中添加对应条目即可，比如支持webp：

const imageMimeMap = {
  // 原有格式...
  webp: 'image/webp'
};

内容的提问来源于stack exchange，提问作者Stiven Ballshi