在SvelteKit(TypeScript)中通过Cloudflare R2 Workers API显示图片问题

最优解决方案：直接通过Worker API返回图片响应 #

不需要在API和前端之间做二进制转字符串/base64的额外处理，直接让Worker返回R2对象的原生响应，是最可靠的方式。

Cloudflare Workers API 代码 #

export default {
  async fetch(request: Request, env: Env) {
    const url = new URL(request.url);
    const imageKey = url.pathname.slice(1); // 从请求路径提取R2存储的图片key

    const imageObject = await env.R2_BUCKET.get(imageKey);
    if (!imageObject) {
      return new Response('图片不存在', { status: 404 });
    }

    // 直接返回R2对象的响应，自动携带正确的Content-Type
    return new Response(imageObject.body, {
      headers: {
        'Content-Type': imageObject.httpMetadata?.contentType || 'image/jpeg',
        'Cache-Control': 'public, max-age=31536000' // 配置缓存策略
      }
    });
  }
};

Svelte 图片组件代码 #

<script lang="ts">
  export let imageKey: string;
  // 替换为你的Worker API部署域名
  const workerApiUrl = 'https://your-worker-domain.workers.dev';
  // 响应式生成图片URL
  $: imageUrl = `${workerApiUrl}/${imageKey}`;
</script>

<img src={imageUrl} alt="R2存储图片" loading="lazy" />

之前方案的问题分析 #

1. 方案1（arrayBuffer转字符串传递）：
   二进制数据转字符串时，默认UTF-8编码无法完整保留所有字节信息，会导致部分二进制内容丢失，前端解码后自然得到空Blob或损坏数据。

2. 方案2（FileReader生成base64 URL）：
   出现MIME类型识别错误，大概率是base64字符串缺少正确的前缀（比如data:image/jpeg;base64,），或者API传递的二进制数据已经因编码损坏，导致浏览器无法识别真实类型。

特殊场景下的base64处理方案 #

如果业务必须使用base64格式传递，可按以下方式修正：

API端代码 #

export default {
  async fetch(request: Request, env: Env) {
    const url = new URL(request.url);
    const imageKey = url.pathname.slice(1);

    const imageObject = await env.R2_BUCKET.get(imageKey);
    if (!imageObject) {
      return new Response('图片不存在', { status: 404 });
    }

    const buffer = await imageObject.arrayBuffer();
    // 用Uint8Array确保二进制转base64的正确性
    const base64Str = btoa(String.fromCharCode(...new Uint8Array(buffer)));
    const contentType = imageObject.httpMetadata?.contentType || 'image/jpeg';

    return new Response(JSON.stringify({ base64: base64Str, contentType }), {
      headers: { 'Content-Type': 'application/json' }
    });
  }
};

前端组件代码 #

<script lang="ts">
  import { onMount } from 'svelte';
  export let imageKey: string;
  const workerApiUrl = 'https://your-worker-domain.workers.dev';
  let imageSrc: string | null = null;

  async function loadImage() {
    const res = await fetch(`${workerApiUrl}/${imageKey}`);
    const { base64, contentType } = await res.json();
    // 拼接正确的base64 URL前缀
    imageSrc = `data:${contentType};base64,${base64}`;
  }

  onMount(loadImage);
</script>

{#if imageSrc}
  <img src={imageSrc} alt="R2存储图片" />
{:else}
  <div>图片加载中...</div>
{/if}

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