如何显示Azure Blob存储中的图片？多图加载与CDN使用疑问

一、Axios 请求图片的问题 #

1. 为何设置 responseType 仍返回文本？ #

在 Node.js 环境下使用 axios 时，responseType: 'blob' 本身不生效（Blob 是浏览器端专属对象），arraybuffer 是正确的配置方向，但你当前的代码仅处理了单张图片的返回逻辑。

2. 如何处理多张图片请求？ #

既然 Azure Blob 已开启匿名读取权限，前端直接请求 Blob 的原始 URL 是最优方案——浏览器本身支持并行加载多张静态资源，既省去后端中转的开销，又能自然实现多图加载。

如果必须通过后端代理，可参考两种思路：

• 提供批量接口，接收多个 Blob URL 参数，返回二进制数据列表（但会增加后端带宽压力，不推荐）；
• 为每张图片单独提供代理接口，前端并行请求这些接口。

另外确认你的 axios 请求配置格式是否正确：

// Node.js 环境下的正确配置示例
const response = await axios.get('your-azure-blob-url', {
  responseType: 'arraybuffer',
  headers: {
    'Accept': 'image/jpeg' // 明确指定接收图片类型
  }
});

二、是否需要使用 CDN？ #

非常有必要，核心原因如下：

• 提升访问速度：Azure CDN 会将图片缓存到全球边缘节点，用户从最近节点获取资源，大幅降低跨地域加载延迟；
• 降低存储成本：高频访问的图片会被 CDN 缓存，减少对 Azure Blob 存储的直接请求，节省带宽开支；
• 优化资源体验：CDN 支持自动图片格式转换（如转 WebP）、压缩、防盗链等功能，进一步适配小说图片的加载场景；
• 增强可用性：多节点分散流量压力，避免单点故障影响用户访问。

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