javascript - "data:image/png;base64,b64Encoderpngstring"设置 html img src 时 VS url-to-folder

标签 javascript html image

我使用 pywebkithtml5 开发桌面 map 服务器

map 切片存储在 sqlite 数据库中。

所以当我设置html img的src时,我有两个选择。

  1. 一个是从数据库中读取图片并b64encode,然后设置img的src为“data:image/png;base64,b64Encoder-string”。

  2. 另一种是从数据库中读取图片保存到磁盘,然后将img的src设置为本地文件夹的url

我的问题是哪种方式更好

我最关心渲染速度。对于浏览器呈现图像,哪个更快

最佳答案

<img src="http://mysite.com/images/myimage.jpg" />这实际上是一个 http URI方案, 同时 <img src="data:image/png;base64,efT....." />data URI ,这种方式将图像内嵌在 HTML 中并且没有额外的 HTTP 请求但是在大多数情况下嵌入的图像不能在不同的页面加载之间缓存,所以解决方案实际上是通过你的方式......什么对你更好和方便忽略 Ian 的建议:)

现在转到浏览器兼容性 -

数据 URI 在 IE 5-7 中不起作用,但在 IE 8 中受支持。Source

页面大小:

base64 编码也会增加页面大小,这是另一件需要注意的事情。

关于javascript - "data:image/png;base64,b64Encoderpngstring"设置 html img src 时 VS url-to-folder,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16642350/

相关文章:

javascript - 为什么我的函数调用网站的另一个页面而不是我的模式?

html - bootstrap 行伪元素的使用

php - 在 php 中创建脚本以在图像上创建亚克力效果

image - 如何检测 jpg jpeg 图像文件是否损坏(不完整)?

javascript - div 标签未更新

javascript - 调用带有可变参数的函数的有效方法是什么?

javascript - ExtJS4 - 更改 TabPanel 标题文本的字体大小

javascript - 使用 gulp 就地更改文件

php - 将视频添加为收藏夹的逻辑。

javascript - 如何在不改变宽度/高度的情况下垂直和水平对齐 DIV 中的图像?