Base64编码PNG图片在Firefox中无法显示但Safari中正常的问题排查与解决咨询

嗨，我来帮你排查这个跨浏览器显示不一致的问题～

首先看你提供的MWE代码，我注意到你的data URI里有个容易忽略的小细节：data:image/png;base64,后面跟着一个空格，也就是data:image/png;base64, iVBORw0KGgo...。这大概率就是Firefox不显示图片的核心原因！

问题原因 #

不同浏览器对data URI的格式严谨度要求不一样：

• Safari对这类格式错误比较宽容，会自动忽略base64编码开头的多余空格；
• Firefox则严格遵循RFC标准，data URI中base64,后面必须直接跟编码内容，不允许有额外的空白字符，否则会解析失败，导致图片无法加载。

修复方法 #

只需要把base64前缀后面的空格删掉就可以了，修改后的img标签代码如下：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAQAACAYAAAAY4xeyAAAFBUlEQVR4nO3TsQ0DAQwDMSX77+wUGeIfOKpgbRnQJiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiUs/d7rtteJDb5w1nAA9hAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhaA273hDD9QX30/UN8P1FffD9T3A/XV9wP1/UB99f1AfT9QX30/UN8P1FffD9T3A/XV9wP1/UB99f1AfT9QX30/UN8P1FffD9T3A/XV9wP1/UB99f1AfT9QX30/UN8P1FffD9T3A/XV9wP1/UB99f1AfT9QX30/UN8P1FffD9T3A/XV9wP1/UB99f1AfT9QX30/UN8P1FffD9T3A/XV9wP1/UB99f1AfT9QX30/UN8P1FffD9T3A/XV9wP1/UB99f1AfT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f0gX98P1G/X94N8fT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f0gX98P1G/X94N8fT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f0gX98P1G/X94N8fT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f0gX98P1G/X94N8fT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f0gX98P1G/X94N8fT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f0gX98P1G/X94N8fT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f0gX98P1G/X94N8fT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f+5xy8QERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERGR/QDbFZbTN31phAAAAABJRU5ErkJggg==" style="width: 20px; height: 200px; border: 1px solid black;" />

额外排查点（如果修复后还是不行） #

• 检查base64编码是否完整，有没有被截断或者混入了其他非法字符；
• 确认PNG文件本身是否正常，可以把base64解码后保存为PNG文件，验证文件是否能正常打开；
• 查看Firefox的开发者工具（F12）的控制台和网络面板，看是否有具体的加载错误提示，帮助进一步定位问题。

内容来源于stack exchange