纯JS使用base64字符串动态创建CSS类实现Hero Image的技术问询

1 动态生成专属CSS类的实现方法 #

你可以通过动态创建<style>标签插入到文档头部的方式批量生成专属类，类名可以按索引、唯一ID规则自定义即可，示例代码如下：

// 假设你已经拿到了base64数组
const base64List = [/* 你的多组base64字符串 */];
// 创建style标签挂载到head
const styleNode = document.createElement('style');
document.head.appendChild(styleNode);
const styleSheet = styleNode.sheet;

base64List.forEach((_, index) => {
  // 生成唯一类名
  const className = `hero-img-${index}`;
  // 插入CSS规则，公共样式也可以提前写死在全局CSS里，这里只写差异化属性即可
  styleSheet.insertRule(`
    .${className} {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 80px;
      height: 60px;
    }
  `, styleSheet.cssRules.length);
});

2 给CSS类赋值base64格式的背景图 #

直接把base64字符串放到background-image的url()参数里即可，不需要额外转义，注意base64本身要携带完整的data:image/[格式];base64,前缀，修改上述插入规则的代码即可：

styleSheet.insertRule(`
  .${className} {
    background-image: url("${base64Str}");
    /* 其余公共样式 */
  }
`, styleSheet.cssRules.length);

如果你的base64字符串本身包含双引号，可以把url()的包裹符改成单引号，或者对base64内的特殊字符做转义处理。

3 方案优劣势及最优解判断 #

该方案可以满足你的固定比例填充、居中展示的需求，适合需要兼容IE等低版本浏览器的场景，但不是所有场景下的最优解：

• 优势：兼容性好，不需要额外处理图片加载逻辑，样式控制灵活
• 劣势：大量base64字符串会直接增加CSS体积，动态生成大量CSS类会增加样式表解析开销，base64资源无法被浏览器单独缓存
  如果不需要兼容IE11及以下版本，更推荐直接使用<img>标签配合object-fit属性实现同等效果，无需动态生成CSS类，代码更简洁，内存开销更低：

const gallery = document.querySelector('#gallery-container');
base64List.forEach(base64Str => {
  const img = document.createElement('img');
  img.src = base64Str;
  // 固定比例+填充+居中，和background方案效果完全一致
  img.style.cssText = `
    width: 80px;
    height: 60px;
    object-fit: cover;
    object-position: center;
  `;
  gallery.appendChild(img);
});

如果你的图片数量较多、更新频率高，还可以把base64转成Blob URL使用，使用完手动释放内存，性能会更好。

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