首屏轮播图使用cdn加载webp图片的代码案例

MQliferecord2026-02-28 11:25

目标：基于 CDN 加载 WebP 图片，且能自动降级为 PNG/JPG（兼容不支持 WebP 的浏览器）

第一步：封装 WebP 检测工具，在用户浏览器不支持webp的情况下加载png/jpg图片

js 复制代码

// src/utils/image.ts
let webpSupportCache: boolean | null = null;

/**
 * 检测浏览器是否支持 WebP（带缓存）
 */
export async function checkWebPSupport(): Promise<boolean> {
  if (webpSupportCache !== null) return webpSupportCache;

  return new Promise((resolve) => {
    const img = new Image();
    img.src = 'data:image/webp;base64,UklGRkoAAABXRXJjUgAAABAAAAAQAAABAAAAAQAAABgAAAAEAAAAA==';
    img.onload = () => resolve(img.width === 1);
    img.onerror = () => resolve(false);
  })
}

/**
 * 生成图片 URL（自动切换 WebP/原图）
 * @param cdnBase CDN 基础路径
 * @param imgName 图片名称（不含后缀）
 * @param ext 原图后缀（如 png/jpg）
 */
export function getImageUrl(cdnBase: string, imgName: string, ext: string = 'png'): string {
  if (webpSupportCache) {
    // 支持 WebP 则拼接 webp 后缀
    return `${cdnBase}/${imgName}.webp`;
  }
  // 不支持则用原图后缀
  return `${cdnBase}/${imgName}.${ext}`;
}

首屏轮播图组件

js 复制代码