web-dev-qa-db-ja.com

画像ソースを空に設定する

画像を無に設定したいと思います。 src=""多くの人々は、ブラウザに問題を引き起こす可能性があると言っています。

http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/

したがって、srcを空に設定するのと同じ問題に以下が直面する可能性があるかどうかはわかりません：

<img id="myImage">

このケースにはsrc属性がないためです。

最初に画像を何も設定しない場合、できることは何ですか？

htmlimagesrc
15
user304602

最適なソリューション

次のようにイメージを初期化します。_src="//:0"_ like here ：_<img id="myImage" src="//:0">_

Edit：以下のAlexのコメントに従って、_//:0_は、明らかにonErrorのimgイベントをトリガーできます。これに注意してください。

Edit 2： Drkawashima によるコメントから=：Chrome 61現在、_src="//:0"_はonErrorイベントをトリガーしていないようです）。

その他の解決策

または、srcタグを実際に埋めるまで、非常に小さな画像を使用できます： like this image 。この「非常に小さな画像」を使用して、タグを次のように初期化します。

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

ソース

DOMから要素を削除

あるいは、単に要素を [〜＃〜] dom [〜＃〜] に表示したくない場合は、JavaScriptを使用します。

_var myObject = document.getElementById('myObject');
myObject.parentNode.removeChild(myObject);
_

（ この回答 に従って、DOM 4のブラウザサポートが不十分なため、JavaScriptの.remove()関数の使用は推奨されません）

または、単にjQueryを使用します。

_$("#myObject").remove();
_
22
Jean-Paul

私が知っている最も一般的に受け入れられている方法（CSSTricksなどが推奨）は、bの1px画像です。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> alt="">

Devtoolsに0Bネットワークリクエストとして表示されるため、パフォーマンスモニタリングを実行している場合、画像リクエストの数に驚くかもしれません。しかし、それ以外は心配することはありません。

注：常に空のaltを含めます。そうしないと、スクリーンリーダーはimg URLを読み上げます。

2
Drkawashima

Srcが空または空白の場合、このスクリプトを使用してデフォルトの画像を設定します

$(document).ready(function () {
   $('img').each(function () {
       if($(this).attr('src')=="") {
          $(this).attr('src', 'Images/download.jpg');
       }
   });
});
0
Dot Net

ハッシュ記号#を使用するだけです。 src属性の有効な値です。 :) https://stackoverflow.com/a/28077004/3841049

0
iGidas