如何让img标签src调用API返回的谷歌云存储临时图片链接直接展示

分后端和前端两类实现，优先推荐后端方案，无需修改现有前端img标签的写法。

后端方案 #

方案1：接口直接代理返回图片资源（最稳妥） #

这是兼容性最好的实现，完全满足你要求的<img src=/give_image_pls?id=xxx/>写法：

• 接口收到GET请求后，先按id生成对应的谷歌云存储临时访问URL
• 服务端内部请求该临时URL，拿到图片的二进制响应
• 把谷歌云返回的响应头（包括Content-Type、Content-Length、缓存规则等）原样返回给前端，响应体直接返回图片二进制流
• 浏览器会把接口当成普通静态图片资源处理，无需额外适配

如果服务端带宽压力较大，可以在代理层加CDN缓存，缓存时长设置为略短于临时URL的有效期即可，大幅降低回源频率。

方案2：修复302临时重定向配置 #

你之前30x重定向不生效基本是配置错误导致的，按以下调整即可正常使用：

• 接口返回302 Found状态码，不要返回JSON/文本格式的URL，而是在响应头中添加Location: 你的临时图片完整URL
• 不要使用301永久重定向，避免浏览器缓存过期的重定向地址导致后续加载失败
• 在谷歌云存储对应桶的CORS配置中，允许你的站点域名的GET请求，放行必要的请求头
• 确认生成的临时URL签名有效，没有提前过期

前端方案（仅适用于后端暂时无法调整的场景） #

如果后端没法改接口逻辑，可以用JS动态加载图片，无需修改接口：

<!-- 页面img标签写法 -->
<img data-img-id="619e0dd12412210190cdbdb9" src="占位图地址" alt="图片说明">

<script>
// 页面加载完成后批量加载图片
document.addEventListener('DOMContentLoaded', async () => {
  const imgList = document.querySelectorAll('img[data-img-id]')
  for (const img of imgList) {
    const id = img.dataset.imgId
    try {
      // 请求接口拿临时图片地址
      const res = await fetch(`/give_image_pls?id=${id}`)
      const imgUrl = await res.text()
      // 赋值给src触发图片加载
      img.src = imgUrl
    } catch (err) {
      // 加载失败时替换为错误占位图
      img.src = "错误占位图地址"
    }
  }
})
</script>

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