Question

我目前正在制作一个 NodeJS 应用程序，其中一部分是从 s3 检索图像（用户头像）并将其显示在浏览器上。目前，每次页面加载/刷新/等时，我都会对 S3 进行 GET 调用。并使用 JQuery 显示它。

我想知道是否有更好的方法来做到这一点，这样我就不必每次刷新页面时都这样做，因为我可以在显示图像之前看到明显的延迟。我尝试在 S3 的元数据中设置缓存控制，但我认为这并没有让它变得更快。

从 S3 获取图像的代码：

app.get("/get_avatar", async (req,res) => {

    try {

        const key = await SQL_get_avatar_key(req.session.passport.user)

        if (key){
            const response = await s3.getObject({
                Bucket:process.env.AWS_BUCKET_NAME,
                Key: key.key
            }).promise()

            let image = encode(response.Body)
            image = "data:"+response.ContentType+";base64,"+image;
            res.send({src:image})
        }
    } catch (e) {
        console.log(e)
    }
})

JQuery 代码：

async function display_avatar(){

  try{
    const result = await fetch("http://localhost:3001/get_avatar",
    {
      method:"GET",
      headers:{
        "content-type":"application/json"
      }
    });

    response = await result.json();

    $("#avatar_img").attr("src", response.src)

    }
  catch(e){
    console.log(e);
  }
}

来自 S3 的 Javascript 缓存图像

0 个答案: