Nhúng hình ảnh Base64

Hoàn toàn không tò mò, trình duyệt nhúng Base64 hoạt động trong trình duyệt nào? Những gì tôi đang đề cập đến là đây .

Tôi nhận ra rằng nó thường không phải là một giải pháp tốt cho hầu hết mọi thứ, vì nó làm tăng kích thước trang khá nhiều - tôi chỉ tò mò.

Vài ví dụ:

HTML:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

CSS:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}

Cập nhật: 2017-01-10

URI dữ liệu hiện được hỗ trợ bởi tất cả các trình duyệt chính. IE cũng hỗ trợ nhúng hình ảnh kể từ phiên bản 8.

http://caniuse.com/#feat=datauri

Các URI dữ liệu hiện được các trình duyệt web sau hỗ trợ:

• Dựa trên tắc kè, như Firefox, SeaMonkey, XeroBank, Camino, Fennec và K-Meleon
• Konqueror, thông qua hệ thống đầu vào / đầu ra nô lệ KIO của KDE
• Opera (bao gồm các thiết bị như Nintendo DSi hoặc Wii)
• Dựa trên WebKit, chẳng hạn như Safari (bao gồm cả trên iOS), trình duyệt của Android, Epiphany và Midori (WebKit là một công cụ phái sinh của công cụ KHTML của Konqueror, nhưng Mac OS X không chia sẻ kiến ​​trúc KIO nên các triển khai khác nhau), cũng như Webkit / Dựa trên Chromium, chẳng hạn như Chrome
• Cây đinh ba
  • Internet Explorer 8: Microsoft đã giới hạn sự hỗ trợ của mình đối với một số nội dung "không thể điều hướng" nhất định vì lý do bảo mật, bao gồm các lo ngại rằng JavaScript được nhúng trong URI dữ liệu có thể không thể hiểu được bởi các bộ lọc tập lệnh như các ứng dụng email được sử dụng trên web. URI dữ liệu phải nhỏ hơn 32 KiB trong Phiên bản 8 [3].
  • URI dữ liệu chỉ được hỗ trợ cho các thành phần và / hoặc thuộc tính sau [4]:
    • đối tượng (chỉ hình ảnh)
    • img
    • kiểu nhập = hình ảnh
    • liên kết
  • Các khai báo CSS chấp nhận một URL, chẳng hạn như hình nền, hình nền, kiểu kiểu danh sách, kiểu danh sách và tương tự.
  • Internet Explorer 9: Internet Explorer 9 không có giới hạn 32KiB và được phép trong các phần tử rộng hơn.
  • Trình duyệt Thế giới: Trình duyệt shell IE có hỗ trợ tích hợp cho lược đồ URI dữ liệu

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

Hầu hết các trình duyệt máy tính để bàn hiện đại như Chrome, Mozilla và Internet Explorer đều hỗ trợ hình ảnh được mã hóa dưới dạng URL dữ liệu. Nhưng có một số vấn đề khi hiển thị URL dữ liệu trong một số trình duyệt di động: Trình duyệt Android Stock và Trình duyệt cá heo sẽ không hiển thị JPEG được nhúng .

Tôi khuyên bạn nên sử dụng các công cụ sau để mã hóa / giải mã cơ sở trực tuyến64:

• Mã hóa sang định dạng Base64

• Giải mã từ định dạng Base64

Kiểm tra tùy chọn "Định dạng URL dữ liệu" để định dạng dưới dạng URL dữ liệu.

Tôi có thể sử dụng ( http://caniuse.com/#feat=datauri ) để hiển thị hỗ trợ trên các trình duyệt chính với một số vấn đề trên IE.