web-dev-qa-db-ja.com

srcのない画像を含める有効な方法は何ですか？

後でjavascriptを使用してsrcを動的に取り込むイメージがありますが、簡単にするために、ページの読み込み時にイメージタグが存在するようにしますが、何も表示しません。 <img src='' />が無効であることを知っているので、これを行う最善の方法は何ですか？

htmlvalidation
198
jhchen

画像のソースを省略する有効な方法はありませんが、サーバーヒットを引き起こさないソースはareです。最近、iframesで同様の問題が発生し、//:0が最適なオプションであると判断しました。いや、本当に！

//（プロトコルの省略）で始まると、現在のページのプロトコルが使用され、HTTPSページで「安全でないコンテンツ」の警告が防止されます。ホスト名をスキップする必要はありませんが、短くします。最後に、:0のポートは、サーバー要求が行われないことを保証します（仕様によると、有効なポートではありません）。

これは、ブラウザでサーバーヒットまたはエラーメッセージが発生しなかったことがわかった唯一のURLです。通常の選択— javascript:void(0) —は、HTTPS経由で提供されるページで使用された場合、IE7で「安全でないコンテンツ」警告を引き起こします。他のポートが原因で、無効なアドレスであってもサーバー接続が試行されました。 （一部のブラウザは、単に無効なリクエストを作成し、タイムアウトになるのを待ちます。）

これは、Chrome、Safari 5、FF 3.6、およびIE 6/7/8でテストされましたが、試行されたリクエストを強制終了するネットワークレイヤーであるため、どのブラウザーでも動作するはずです。

228
Ben Blank

別のオプションは、空白の画像を埋め込むことです。あなたの目的に合ったどんな画像でもかまいませんが、次の例では、26バイトのみのGIFをエンコードします- http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever から=

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />

以下のコメントに基づいて編集：

もちろん、ブラウザのサポート要件を考慮する必要があります。 IE7以下のサポートは注目に値しません。 http://caniuse.com/datauri

191
Isius

要素を動的に追加することをお勧めします。jQueryまたはその他のJavaScriptライブラリを使用する場合は、非常に簡単です。

prependおよびappendも参照してください。それ以外の場合、そのような画像タグがあり、それを検証したい場合は、1px透明gifやpngなどのダミー画像の使用を検討できます。

18
太極者無極而生

私はこれをしばらくしていませんが、この同じことを一度経験しなければなりませんでした。

<img src="about:blank" alt="" />

私のお気に入り-//:0の1つは、ポート0（tcpmuxポート？）でOriginサーバーへのHTTP/HTTPS接続を試みることを意味します。ちなみに、ブラウザはポートゼロを認識し、リクエストを送信することすらできません。しかし、私はむしろ、それがおそらくあなたが意味するものではない場合、そのように指定されないようにします。

とにかく、about:blankのレンダリングは、実際にテストしたすべてのブラウザーで非常に高速です。私はそれをW3Cバリデーターに投げただけで文句を言わなかったので、それは有効であるかもしれません。

Edit：しないでください。すべてのブラウザで機能するわけではありません（この回答のコメントで指摘されているように、「壊れた画像」アイコンが表示されます）。以下の<img src='data:...ソリューションを使用してください。または、妥当性を気にせず、サーバーへの余分な要求を避けたい場合は、src属性なしで<img alt="" />を実行できます。しかし、それはINVALIDHTMLなので、慎重に選んでください。

さまざまなメソッドの全体を示すテストページ： http://desk.nu/blank_image.php -さまざまな種類の異なるdoctypeおよびcontent-typeで提供されます。 -以下のコメントで述べたように、Mark Ormstonの新しいテストページを使用してください： http://memso.com/Test/BlankImage.html

15
Uberbrady

コメントに書かれているように、この方法は間違っています。

以前はこの答えは見つかりませんでしたが、 W3 Specs 有効な空のsrcタグによると、アンカーリンク#になります。

例：src="#"、src="#empty"

ページは正常に検証され、追加の要求は行われません。

12
iGidas

src属性を空のままにすると、ブラウザは現在のページのURLにリクエストを送信します

src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="
9
Prathamesh Rasam

Srcを空の文字列に設定し、CSSにルールを追加して壊れた画像アイコンを非表示にするだけでうまくいくことがわかりました。

[src=''] {
    visibility: hidden;
}
8
Shawn Walton

私はそれを使用してそれを見つけました：

<img src="file://null">

要求を行わず、正しく検証します。

ブラウザは、ローカルファイルシステムへのアクセスを単にブロックします。

ただし、コンソールログにChromeのエラーが表示される場合があります。例：

Not allowed to load local resource: file://null/
7
tenkod

これに基づいて、真に空白で有効かつ互換性の高いSVGを使用してください 記事 ：

src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"

SVGと同様に、デフォルトのサイズは300x150pxになりますが、実際の実装で必要になる可能性があるため、img要素のデフォルトスタイルで作業できます。

6
mystrdat

ベン・ブランクの答えに基づいて、w3バリデーターで検証するためにこれを取得した唯一の方法は次のようなものでした。

<img src="/./.:0" alt="">`
5
John Duncan
<img src="invis.gif" />

Invis.gifは、単一ピクセルの透過gifです。これは、将来のブラウザバージョンで壊れることはなく、90年代からレガシーブラウザで機能し続けています。

pngも機能するはずですが、私のテストでは、gifは43バイトで、pngは167バイトであったため、gifが勝ちました。

追伸altタグも忘れないでください、それらも同様です。

4
franki

個人的にabout:blanksrcを使用し、img要素の不透明度を0に設定することにより、壊れた画像アイコンを処理します。

4
Miguel

最近では、空のimg srcを作成するための最善で短くて妥当な方法は次のとおりです。

<img src="data:," alt>
<img src="data:," alt="Alternative Text">

すべてのブラウザで「代替テキスト」（もしあれば）を表示します（ChromeおよびIEのbroken-image-icon）。

OT：ところで、すべてのブラウザはプレーンなaltを理解しています。 =""を省略できます。これはHTML仕様ごとに暗黙的です。

データURIは有効です。空のメディアタイプのデフォルトはtext/plainです。したがって、空の.txtファイルを表し、data:text/plain,と同等です

4
j.j.