我在更新前面的图像时遇到了一些问题。当我使用
supabase
中的更新功能更新图像时,它会正确更新图像数据并保持文件名(存储在数据库中的相同文件名),但在客户端,对存储桶所做的更改不会出现,除非我打开一个新的隐身窗口。我用于更新存储桶的功能取自 supabase
文档,在客户端查看图像更新的唯一方法是在浏览器的开发工具中禁用缓存。
const { data, error } = await supabase
.storage
.from('avatars')
.update('public/avatar1.png', avatarFile)
我不知道为什么会这样
在客户端查看图像更新的唯一方法是在浏览器的开发工具中禁用缓存
答案就在这里!原因是您的浏览器缓存了您的图像。
您可以做的一件事是在上传图像时为 cacheControl 标头使用较低的值。在这个例子中,我们有 5 分钟的缓存最大年龄。
const { data, error } = await supabase
.storage
.from('avatars')
.upload('public/avatar1.png', avatarFile, {
cacheControl: '300', // The image will be cached for 5 minutes
upsert: false
})
但这有一些缺点,例如您的服务比必要更频繁地请求原始图像。我建议做的是修改图片网址。
例如,如果您有这样的图片网址
https://example.com/images/profile.png
您可以手动添加一个随机查询参数来创建一个新的 URL
https://example.com/images/profile.png?c=1