【Web】リンク画像が無いときNo Image画像を代わりに表示する方法

Amazonに商品の画像が無いとき、代わりに『No Image』画像が表示されたらいいと思いません？

蔵書リンクMAKERを使っているときに気になるのが、Amazonに(まだ)画像が存在しない場合には、何も表示されないこと。
本当に無いのか、それともネットが重くてロードが出来ていないだけなのか、区別が付きにくいし……。
また、自分でいちいち代替画像を作ってリンクを張り替えるのも面倒だし、新刊なんかは今は未登録でもそのうち登録されることも考えられます。
今回、きまぐれブックテーマを作っていて、ますますその思いが強くなりました(レイアウトを固定化しようとすると、画像部分が間抜けにあいてしまうのです……)。 画像がないときには、リンク先に『No Image』画像なりを置いておいてくれればよいのに……。

そのときふと思いついたのが、<img>タグの背景画像として『No Image』画像を設定しておけば、Amazonに画像が無いときには背景が表示され、画像が有る／後から登録された場合は背景の代わりにその画像が表示されるようになるかも……ということ。

で、試してみたら実際そうなりました。
ブックテーマの設置用スクリプトで、
.rbsResultWindow .rbsImgTable .imgWin img {
height: 160px;
background: url('https://furyu.tea-nifty.com/image/NoImage.png') no-repeat;
}
のような箇所がそれ。

蔵書リンクMAKERの方もやりかけてましたが、作成当時にCSSというものをほとんど知らずclass設定をしていなかったツケで、どうやってもAmazon以外の画像リンクにも影響してしまうため、断念

ポイントは、「height: 160px;」で画像の高さを揃えてやっていることと、「background: ～;」で背景画像を指定していること。
実は、リンク画像が無いときにAmazonは代わりに1px×1pxの透過GIFを返してくるようなのです。
なので、これをCSSの指定で適当に拡大し(height:160px;)、背景画像を設定してやると、背景画像が透けてみえるわけです。
一方で、リンク画像があれば、それはJPEG形式でもともと透過機能がないフォーマットのため、今度は背景画像が隠される、という寸法。

留意点として、

• リンク画像が存在する場合でも、その表示の直前に一瞬背景画像(No Image)が見える。
• リンク画像が存在しない場合に送られてくる透過GIFは1×1の正方形。なので、拡大しても正方形。一方、大概の本は長方形。→レイアウトを考える必要有り
  height:だけではなくwidthも変える、という手もあるけど、この場合リンク画像が歪んでしまう可能性が有る
• リンク画像が背景が透けてみえる画像(透過GIF・PNG等)の場合には適しないので、応用時は注意。

テーマは……『スタイルシート』スタイルシートにしとこう。