如何在Nginx中配置可被浏览器正常加载的base64格式GIF图片服务

原配置失效原因 #

• HTTP响应返回的是未解码的Base64文本：data:image/gif;base64,xxx 是Data URI的专属格式，仅在浏览器解析HTML/CSS内联资源时自动解码，直接作为HTTP响应内容返回时，浏览器会将Base64文本直接当成图片二进制流解析，自然无法识别为有效图片
• image/gif;base64 不是标准MIME类型，浏览器无法正确匹配资源解析规则

可用配置方案 #

方案1：Nginx 1.13.10及以上版本（推荐） #

该版本原生内置$decode_base64方法，直接解码Base64为二进制GIF数据返回即可：

location /img.gif {
  default_type image/gif;
  add_header Cache-Control "public, max-age=31536000, immutable";
  return 200 $decode_base64("R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=");
}

方案2：低版本Nginx兼容方案 #

提前将Base64字符串解码为实际的1x1.gif二进制文件，存放在Nginx的静态资源目录下，直接返回静态文件即可：

location /img.gif {
  root /你的静态资源存放目录;
  expires 1y;
  add_header Cache-Control "public, immutable";
}

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