本地启动网站时CSS background内联SVG图片无法渲染是什么原因？

以下是两类环境表现不一致的常见原因：

• 构建环境差异导致产物内容不同
  你本地的Node依赖版本、Rollup相关CSS处理插件版本和Netlify构建环境的版本不一致，部分低版本的CSS压缩、URL处理插件会错误转义data URI中的SVG编码字符，比如把%23（对应#符号）、%3C（对应<符号）错误解码，导致SVG data URI失效。你可以直接对比本地build生成的CSS文件和Netlify线上站点的CSS文件中#btnToggleHeader::before对应的background-image属性值，即可快速确认是否属于该问题。
• 本地Python HTTP服务的响应配置错误
  Python自带的http.server默认没有对CSS文件配置正确的Content-Type响应头，如果返回的头信息不是text/css; charset=utf-8，浏览器会使用错误的编码解析CSS内容，导致data URI中的特殊字符识别失败，最终SVG图标无法渲染。你可以打开浏览器开发者工具的网络面板，查看本地环境下CSS请求的响应头，验证Content-Type是否配置正确。
• 浏览器本地安全策略限制
  部分浏览器的安全策略会限制本地服务下内联data URI格式的SVG渲染，这种情况可以直接查看浏览器控制台是否有相关报错信息即可确认。

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