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

私は後でJavaScriptで動的にsrcを入力する画像を持っていますが、簡単にするために、ページロード時に画像タグを存在させて、何も表示しないようにします。私<img src='' />は無効であることを知っているので、これを行うための最良の方法は何ですか？

画像のソースを省略する有効な方法はありませんが、そこにあるサーバーのヒットを引き起こすことはありませんソースが。私は最近、iframesに同様の問題//:0があり、最良の選択肢であると判断しました。いや、本当に！

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

これが私が見つけた唯一のURLで、どのブラウザでもサーバーヒットやエラーメッセージは発生しませんでした。通常の選択— javascript:void(0)— HTTPS経由で提供されるページで使用すると、IE7で「安全でないコンテンツ」の警告が表示されます。他のポートが原因で、無効なアドレスであってもサーバー接続が試行されました。（ブラウザによっては、無効なリクエストを出し、タイムアウトになるのを待つだけです。）

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

別のオプションは、空白の画像を埋め込むことです。目的に合った画像であれば何でも可能ですが、次の例では、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

最近の私は、空のimg srcのための最良の短くて健全で有効な方法は次のとおりです。

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

2番目の例では、「代替テキスト」（およびChromeとIEのbroken-image-icon）が表示されます。

"data:,"有効なURIです。空のメディアタイプのデフォルトはtext/plainです。したがって、それは空のテキストファイルを表し、以下と同等です。"data:text/plain,"

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

• http://api.jquery.com/appendTo/
• http://api.jquery.com/prependTo/
• http://api.jquery.com/html/

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

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

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

私のお気に入りは、//:0ポート0（tcpmuxポート？）でオリジンサーバーへのHTTP / HTTPS接続を試行することを意味します-これはおそらく無害ですが、とにかくやりたくないです。ブラウザーはポート0を表示し、リクエストを送信しないこともあります。しかし、私はまだそれがおそらくあなたが意味するものではないときは、そのように指定されない方がいいです。

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

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

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

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

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

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

ページは正常に検証され、追加のリクエストは行われません。

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

[src=''] {
    visibility: hidden;
}

src属性を空のままにしておくと、ブラウザは現在のページのURLにリクエストを送信します。URLが必要ない場合は、常に1 * 1の透過imgをsrc属性に追加します。

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

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

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

リクエストを行わず、正しく検証します。

ブラウザは、ローカルファイルシステムへのアクセスをブロックするだけです。

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

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

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

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

他のSVGと同じように、デフォルトのサイズは300x150pxになりますimgが、実際の実装ではいずれの場合でも必要になる可能性があるため、要素のデフォルトスタイルで操作できます。

ベン・ブランクの答えを基にして、これをw3バリデーターで検証する唯一の方法は次のとおりです。

<img src="/./.:0" alt="">`

私は個人的にを使用してabout:blank src、img要素の不透明度をに設定することで、壊れた画像アイコンに対処しています0。

<img src="invis.gif" />

ここで、invis.gifは単一ピクセルの透明gifです。これは、将来のブラウザバージョンでは機能しなくなり、90年代以降のレガシーブラウザでも機能しています。

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

psはaltタグを忘れないでください。バリデーターも同様です。

単に、このように：

<img id="give_me_src"/>