iPhone - 数据 URI（CSS 背景图像）仅在连接到 WIFI 时才起作用
我创建了一个供 Android 和 iPhone 设备使用的移动 Web 应用程序，经过测试，我很高兴一切都运行良好，因此决定尝试对其进行一些优化。
我决定在我的 css 文件中使用数据 uri，因为所有图像都是小的 16x16px png 图像。
当我的 iPhone 通过 WiFi 连接到互联网进行测试时，图像加载正常，但是当使用移动数据连接进行连接时，图像无法加载。
查看 Apache 错误日志，我发现由于某种原因，图像被作为文件请求（并且未找到），尽管使用 WiFi 没有错误...
File does not exist: /www/min/data:image, referer: http://mysite.com/login/
我正在使用的 CSS 如下...
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA5CAYAAAD3PEFJAAAAUUlEQVQYV4XMyw1AABQF0ePpQCNK0Ke+lCEkFmLjWRHx3dzcZCaDItV1m5GZgn0y1+M9AWfl4r2Cv/Jd+fDWN/AXgCyrqukCY6APDIEpMAeWDc7zXPFRLR43AAAAAElFTkSuQmCC");
我我已经尝试了我能做的一切，不使用 css 简写/使用 css 简写，不同的 mime 类型，不使用 Google Minify，但都无济于事。但这仍然不能解释为什么这一切都可以通过 WiFi 完美运行。
Android 设备也可以像 Firefox、Chrome 和桌面版 Safari 一样完美运行。此外，当加载实际的 PNG 图像文件（与使用数据 URI 嵌入图像相反）时，图像加载效果很好。
如果有人能阐明这一点，我将永远感激不已，大多数事情我都能解决，但这让我完全难住了！
I've created a mobile web application for use by Android and iPhone devices, after testing I was happy that everything worked perfectly and so decided to try optimising it a little.
I decided I would use data uri's in my css file as all the images are small 16x16px png images.
While testing with my iPhone connected to the Internet via WiFi the images load fine, however when connecting using the mobile data connection images do not load.
Looking through the Apache error log I see that for some reason the image is being requested as a file (and is not being found), although using WiFi there are no errors...
File does not exist: /www/min/data:image, referer: http://mysite.com/login/
The CSS I am using is as follows...
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA5CAYAAAD3PEFJAAAAUUlEQVQYV4XMyw1AABQF0ePpQCNK0Ke+lCEkFmLjWRHx3dzcZCaDItV1m5GZgn0y1+M9AWfl4r2Cv/Jd+fDWN/AXgCyrqukCY6APDIEpMAeWDc7zXPFRLR43AAAAAElFTkSuQmCC");
I've tried everything I can thing of, not using css shorthand/using css shorthand, different mime types, not using Google Minify, but all to no avail. But this still does not explain why it all works perfectly over WiFi.
The Android device also works perfectly as do Firefox, Chrome and the desktop version of Safari. Also when loading the actual PNG image files (as opposed to embedding images using data URIs) the images load fine.
If anybody can shed some light on this I will be eternally grateful, most things I can work out but this has me completely stumped!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我想知道运营商是否阻止了数据 URI 方案或普通不支持它。我会尝试将笔记本电脑与移动连接连接起来，看看数据 URI 是否有效。嗯，但是您不会在 Web 服务器日志中看到请求失败。我还建议使用 wireshark 查看传入服务器的请求，并查看请求之间是否存在差异来自移动连接与 WiFi（特别是在两个请求中发送的标头）
I am wondering if the carrier is blocking data URI schemes or plain does not support it. I would try to tether the laptop with a mobile connection and see if data URIs work. Hmm, but then you would not have seen the request fail on your web server logs. I also recommend seeing the request coming in to the server using wireshark and see if there is a difference in requests between the one from mobile connection vs. wifi (specifically the headers being sent in the two requests)
这并不是真正的解决方案，更多的是一种解决方法...
经过一番折腾后，我发现让它工作的唯一方法（使用 go2）是使用包含数据 uri 的 css 的内联样式。
然而，我的目的是将图像嵌入到外部样式表中，这样它（以及嵌入的图像）就会被缓存，将图像嵌入到 html 文档本身意味着我无法缓存图像，因此必须在每个请求中加载它们。
一如既往，如果有更好的方法，我很乐意听到。
This is not really a solution, more of a work around...
It seems after much messing around that the only way I can find to get this to work (usin go2) is to use inline styles for css containing the data uri's.
However, my intention was to embed the images into the external stylesheet so it (and the embedded images) would become cached, embedding images into the html document itself means I cannot cache the images so they must be loaded with every request.
As always, if there is a better way I would love to hear about it.