Supabase存储桶更新图片后客户端无法实时显示问题求助

问题根源 #

浏览器会自动缓存图片这类静态资源，当你用相同文件名更新Supabase存储桶里的图片时，因为URL没变化，浏览器会直接调用本地缓存的旧图，不会去服务器拉新资源。无痕窗口或禁用缓存能看到新图，就是因为这些模式下浏览器不读取本地缓存。

可行解决办法 #

1. 给图片URL加缓存破折号参数 #

在获取图片公网URL的时候，拼上一个唯一的查询参数（比如当前时间戳、文件哈希），让浏览器误以为是新资源，从而重新请求。

代码示例：

// 获取原始公网URL
const { data: { publicUrl } } = supabase
  .storage
  .from('avatars')
  .getPublicUrl('public/avatar1.png');

// 拼接时间戳，确保每次请求的URL都不一样
const cacheBustedUrl = `${publicUrl}?t=${Date.now()}`;

// 用这个处理后的URL渲染图片就行

2. 调整Supabase存储桶的缓存控制策略 #

直接在Supabase控制台修改存储桶的缓存规则，缩短缓存有效期，让浏览器更快地主动请求新资源：

• 打开Supabase控制台的Storage页面
• 选中avatars存储桶，点击「Settings」选项卡
• 在「Cache Control」输入框里设置缓存规则，比如max-age=300（缓存5分钟），或者no-cache（每次请求都验证资源是否更新）

3. 上传时设置缓存控制头 #

更新文件的时候，通过update方法的配置项设置缓存控制头，让浏览器不对这个资源做持久缓存：

const { error } = await supabase
  .storage
  .from('avatars')
  .update('public/avatar1.png', avatarFile, {
    cacheControl: 'no-cache' // 告诉浏览器不要缓存这个资源
  });

// 上传完成后重新获取一次URL
const { data: { publicUrl } } = supabase
  .storage
  .from('avatars')
  .getPublicUrl('public/avatar1.png');

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