javascript - 缓存来自 Lorem Picsum 的图像

Question

所以，我想用非常好的https://picsum.photos/方法来获取一些随机图像并将它们缓存起来供以后的用户使用。

如果我只是简单地设置src一个图像标签https://picsum.photos/id/493/200/300- 它工作得很好而且很漂亮，但我希望缓存这些图像。

请求的内容类型是image/jpeg。

我正在使用Axios我的请求，所以我抓住了response.data，但我不确定下一步该做什么。

我试着把很多东西放在src我的img：

• 简单地response.data
• btoa(unescape(encodeURIComponent(response.data)));
• data:image/jpeg;base64,${btoa(unescape(encodeURIComponent(response.data)))}};

现在我已经没有想法了。

我想我的第一个问题是我不太确定服务返回了什么。所述图像的字节数组？如果我typeof得到string，编码的字节数组？非常混乱。

在这里您可以找到生成的img元素：https ://pastebin.com/9F0gnC7D

标签： javascript

Answer 1

搞定了，第一个重要信息：如果响应中没有Content-Encoding标头，则意味着端点返回原始字节。

第二个也是最后一个：Axios返回一个 JSON，你不能把二进制放在 JSON 中，所以在转换中string它会被破坏，但有一个修复：

    fetchRandomPic: async (): Promise<any> => {
        const response = await Axios.get(URLS.RANDOM_PIC, { ...axiosConfig, responseType: "arraybuffer" });

        return `data:image/jpeg;base64,${Buffer.from(response.data, "binary").toString("base64")}`;
}

现在像魅力一样工作:)