2009-10-15 8 views
15

インラインbase64でエンコードされた画像を表示するにはどうすればよいですか?IE6:IE6で動作するインラインbase64イメージを取得するには?

これはFirefox/Chrome/Safariでは動作しますが、IE6では動作しません。

+0

ちょっと好奇心:なぜあなた(または誰か)がこれをしたいのですか?キャッシュ可能なイメージはすべてのブラウザで好まれないでしょうか?外部CSSファイルで私にはうまく見えますが、HTMLでは見えません。 – Arjan

+0

のようにキャッシュ可能:通常どおりダウンロードされ、ブラウザによってキャッシュされる任意のイメージ。またはこれは、単一ファイルのホストされていないHTMLで使用されていますか? – Arjan

+4

インラインでHTTP要求が減少します。 – Jacob

答えて

6

GoogleのChrome Frameをインストールしますか?

真剣に、あなたはできません。 IE6はBase64インラインイメージをサポートしていません。

+0

IE6が実際のファイルにリンクするように条件文を書くことはできますが、それ以外の場合はbase64が表示されますか? – Jacob

+0

javascriptを使ってsrcを動的に設定する必要がありますが、IMOはそれよりも面倒です。サーバーからイメージをロードすることは悪いことではありません。ユーザーが複数のページを読み込んでキャッシュできることを意味します。なぜあなたはそれらをインラインにしようとしていますか? –

+0

Chrome Frameについての悲しい点は、企業はそれを選ぶことを開始するつもりはなく、まだIE6を使用していることです。そのように、それは同時に、比較的愚かで悲しいです。興味深い考えですが、エンドユーザーではなく開発者にとって無駄です。 – mimetnet

1

企業向けの設定ではない場合は、IE6のサポートをすべて一滴落として、古くなったブラウザの使用を強く希望する場合はChrome Frameをインストールしてもらいます。

+0

IE6が実際のファイルにリンクするように条件文を書くことはできますが、それ以外の場合はbase64が表示されますか? – Jacob

+0

依存していますが、PHPのようなスクリプト言語を使用していますか? – mgbowen

+0

PHPはどのように役立ちますか?これは、クライアント側で実行する必要があります。いいえ、ちょうどHTML – Jacob

-1

ORGINAL

私はIE6は<img/>タグ用のインラインデータをサポートしています信じていません。しかし、GIFやJPGのような別のフォーマットを試してみてください。

EDIT は、それが正確に1が簡単にPNGが<img/>タグ用のインラインデータ形式としてサポートされていない可能性があることを推測することができ(まだ議論の余地)PNGをサポートするために、永遠にIEを取っているという事実を考えます。これで、goto **ORIGINAL**

+4

を参照してください。IE6がインラインデータをサポートしていない場合、形式は何か問題になりますか? –

+0

多分mimetnetは問題が* PNG *サポートの欠如であると考えています。その場合、GIFまたはJPGが機能するかもしれません。 – pavium

+0

IE6はPNGをサポートしています(ただし、アルファ透明度はありませんが、回避策があるようですが、http://support.microsoft.com/kb/294714を参照) –

1

少なくとも、CSSでbase64を使うことができます。 ご覧ください:​​

おそらくもっと多くの研究がmhtml://を使用してインライン画像に役立つ可能性があります。

4

IE6では、ベース64エンコードされたイメージを正しく解釈するための式が必要です。ディーンエドワーズは、このソリューションについてここで説明します:http://dean.edwards.name/weblog/2005/06/base64-sexy/

注:これは非常に醜いハックです。最初はCSSに画像コードを入れていました。このソリューションでは、プレゼンテーションデータをJavascriptに入れたり、CSSの動作データを入れる必要があります。厄介だが必要。

13

私のソリューションは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> 
+0

ここで何が起こっているのか説明できますか?面白そうですが、例えば...!locoloco? –

+1

@Chrisこれは、複数のリソースを単一のHTMLファイルで記述するための、ほとんど実装されていない、複数部分のHTML(以下の答えを参照)を使用します。ファイルには1つのURIがあるので、様々な部分に 'Content-Location'ヘッダーが与えられ、前の '! 'で参照され、その場所に追加されます('# 'はHTML内の特定のDOMノードの場所を指定します資料)。 – Barney

+0

私はこれに大きな希望を持っていました。私はIE6で動作しません。 :( – varun

0

これは再びIE6に現れてBase64のイメージを作るために簡単な修正が考えられます。

Base64 image fix for Internet Explorer

*壊れたリンクのため申し訳ありませんが、今、正しいものが来ます!

これは、物事を再び機能させる非侵入的な方法だと思います。 IE上にすでに表示されている破損した画像(破損したアイコン)を手にした後、実際に画像を修復します。

1

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> 
+0

これはIE6とIE7の問題を克服する簡単な方法だと思います。 –

関連する問題