インラインbase64でエンコードされた画像を表示するにはどうすればよいですか?IE6:IE6で動作するインラインbase64イメージを取得するには?
これはFirefox/Chrome/Safariでは動作しますが、IE6では動作しません。
インラインbase64でエンコードされた画像を表示するにはどうすればよいですか?IE6:IE6で動作するインラインbase64イメージを取得するには?
これはFirefox/Chrome/Safariでは動作しますが、IE6では動作しません。
GoogleのChrome Frameをインストールしますか?
真剣に、あなたはできません。 IE6はBase64インラインイメージをサポートしていません。
IE6が実際のファイルにリンクするように条件文を書くことはできますが、それ以外の場合はbase64が表示されますか? – Jacob
javascriptを使ってsrcを動的に設定する必要がありますが、IMOはそれよりも面倒です。サーバーからイメージをロードすることは悪いことではありません。ユーザーが複数のページを読み込んでキャッシュできることを意味します。なぜあなたはそれらをインラインにしようとしていますか? –
Chrome Frameについての悲しい点は、企業はそれを選ぶことを開始するつもりはなく、まだIE6を使用していることです。そのように、それは同時に、比較的愚かで悲しいです。興味深い考えですが、エンドユーザーではなく開発者にとって無駄です。 – mimetnet
企業向けの設定ではない場合は、IE6のサポートをすべて一滴落として、古くなったブラウザの使用を強く希望する場合はChrome Frameをインストールしてもらいます。
ORGINAL
私はIE6は<img/>
タグ用のインラインデータをサポートしています信じていません。しかし、GIFやJPGのような別のフォーマットを試してみてください。
EDIT は、それが正確に1が簡単にPNGが<img/>
タグ用のインラインデータ形式としてサポートされていない可能性があることを推測することができ(まだ議論の余地)PNGをサポートするために、永遠にIEを取っているという事実を考えます。これで、goto **ORIGINAL**
を参照してください。IE6がインラインデータをサポートしていない場合、形式は何か問題になりますか? –
多分mimetnetは問題が* PNG *サポートの欠如であると考えています。その場合、GIFまたはJPGが機能するかもしれません。 – pavium
IE6はPNGをサポートしています(ただし、アルファ透明度はありませんが、回避策があるようですが、http://support.microsoft.com/kb/294714を参照) –
少なくとも、CSSでbase64を使うことができます。 ご覧ください:
おそらくもっと多くの研究がmhtml://を使用してインライン画像に役立つ可能性があります。
IE6では、ベース64エンコードされたイメージを正しく解釈するための式が必要です。ディーンエドワーズは、このソリューションについてここで説明します:http://dean.edwards.name/weblog/2005/06/base64-sexy/
注:これは非常に醜いハックです。最初はCSSに画像コードを入れていました。このソリューションでは、プレゼンテーションデータをJavascriptに入れたり、CSSの動作データを入れる必要があります。厄介だが必要。
私のソリューションはIE6上でスムーズに動作します。それはあなたを助けるかもしれません!
<!--
Content-Type: multipart/related; boundary="=_data-uri"
-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pic {
width:670px;height:710px;
background-image: expression("url(mhtml:" + window.location + "!locoloco)");
}
</style>
</head>
<body>
<div id="pic" ></div>
<div id=test style="display: none;">
--=_data-uri
Content-Location:locoloco
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8 /w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--=_data-uri--
</div>
</body>
</html>
これは再びIE6に現れてBase64のイメージを作るために簡単な修正が考えられます。
Base64 image fix for Internet Explorer
*壊れたリンクのため申し訳ありませんが、今、正しいものが来ます!
これは、物事を再び機能させる非侵入的な方法だと思います。 IE上にすでに表示されている破損した画像(破損したアイコン)を手にした後、実際に画像を修復します。
base64の画像がIE6とIE7に表示されています...最後に、CSSでエンコードされた画像を使用しているときに簡単な解決策が見つかりました。
「同じクラスに2つの属性を記述します。CSSのブラウザ固有のハックを使用し、」
を、私は以下にそれを説明するつもりです。
<div class="myClass"> </div>
<style>
.myClass{
background=url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAySURBVHjaYlSdd/4/AwQwQml0PgMTHsn/yIoYCCmEKcKrEFkRTrcxEVIAs46g7wACDACraA+g90OOjwAAAABJRU5ErkJggg%3D%3D');
/* Above property will work for all browsers*/
*background=url('give real path_to_image');
/* This will work only for ie6 and ie7 */
}
</style>
これはIE6とIE7の問題を克服する簡単な方法だと思います。 –
ちょっと好奇心:なぜあなた(または誰か)がこれをしたいのですか?キャッシュ可能なイメージはすべてのブラウザで好まれないでしょうか?外部CSSファイルで私にはうまく見えますが、HTMLでは見えません。 – Arjan
のようにキャッシュ可能:通常どおりダウンロードされ、ブラウザによってキャッシュされる任意のイメージ。またはこれは、単一ファイルのホストされていないHTMLで使用されていますか? – Arjan
インラインでHTTP要求が減少します。 – Jacob