关于在服务器存储完整Base64图片数据并在HTML中引用的可行性咨询

当然可以这么做，但先帮你纠正示例代码里的一个小错误，再详细说下相关的注意事项：

一、可行性确认 #

完全没问题，你既可以把完整的data:image/png;base64,iVBOR...格式字符串存储在服务器的文件里，也可以存在数据库字段中，之后只要能正确读取这个内容并给到HTML的img标签就能正常显示图片。

二、你示例代码的问题 #

你写的这段代码是无效的：

<img src="data:image/png;base64,url(./encode.b64)">

url()是CSS里引用资源的语法，HTML的img标签src属性不支持这种写法。正确的做法分两种情况：

• 如果你的服务器上的encode.b64文件里已经是完整的data URI字符串（比如文件内容就是data:image/png;base64,iVBOR...），那你可以通过后端读取文件内容后直接输出到src里，或者用AJAX加载后设置给img的src；
• 如果encode.b64里只存了iVBOR...这部分纯base64编码，那你需要在HTML里手动拼接前缀，比如：

  <img src="data:image/png;base64,这里替换成从encode.b64读取到的内容">
  

三、需要注意的优缺点 #

适合用的场景

• 图片体积很小（比如几KB的小图标），嵌入后可以减少一次HTTP请求；
• 需要把图片和HTML/JS代码打包在一起，避免单独管理图片文件的场景。

不推荐的情况

• 大图片：data URI的体积会比原图片大30%左右，加载速度更慢；
• 被多个页面复用的图片：浏览器不会缓存data URI的内容，每个页面加载都会重复下载，浪费带宽；
• 需要频繁修改的图片：base64字符串完全不可读，修改起来非常麻烦，不如直接编辑图片文件方便。

备注：内容来源于stack exchange，提问作者chain1