データサポート：Internet ExplorerのURL

多くの人がこの画像表示方法を知っていますが、あまり人気がありません。 Internet Explorerでの表示に問題があります（IE 6.7-彼らは何が与えられているのか全く理解していません。IE8-32kbより小さい画像のみを受け入れます）。



この問題を解決するには？



RFC 2397によると、画像（他のデータと同様）は次の形式で提示する必要があります。

data:[<mediatype>][;base64],<data>

構文をさらに詳しく調べます。

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data

mediatype := [ type "/" subtype ] *( ";" parameter )

data := *urlchar

parameter := attribute "=" value







ここで何が面白いのですか？ 実際、 mediatypeには追加のパラメーター（charsetなど）が含まれる場合があります。

したがって、データを保存することを禁止する人はいません。

なぜ私はこれすべてですか？

Internet Explorerはbase64でエンコードされた画像を読み取ることができませんが、 urlを指定すると簡単に読み込むことができます。

では、 mediatypeで URLを直接指定するとどうなりますか？



これはおよそ次のように実行できます。

data:image/png;src=habr.png;_base64_...







もちろん、これらはすべて非常に優れており、興味深いものですが、IEは追加のパラメーターが私たちの写真であるとどのように理解していますか？



動作を使用することをお勧めします 。

このcss属性はInternet Explorerでのみサポートされており、PNGFix（その実装の1つ）などのプロジェクトで多くの人に知られています。



次のようになります（ CSSコード ）：

#A {

background-image: url(data:image/png;src=habr.png;_base64_...);

behavior: url(ieb64.htc);

}









そして、これはieb64.htcコードです：

< public:attach event ="ondocumentready" onevent ="ondocumentready()" />

< script type ="text/javascript" >

function ondocumentready() {

this .style.backgroundImage =

this .currentStyle

.backgroundImage

.replace(

/^url\s*\(\s*\ "?\s*data:[^;]+;src=([^;]+);.*$/,

function(all, url) {

return " url(\ "" + url + "\")" ;

}

);

}

</ script >

こちらのデモをご覧ください 。

ここで、 htcファイルをダウンロードできます 。



読んでくれてありがとう！