なぜ起きるんだろう→"Resource interpreted as Image but transferred with MIME type text/html"

HTML

変なところでハマったのでメモ。

htmlのsrc属性について。今更。。。

あるとき開発環境で頻繁にエラーが出るようになった。サーバ側のエラーログみるとトークンエラーだった。
原因がなんと↓こんなこと書いてあったからだった。

<img src="#"/>

おそらく動的にsrc属性の中身を変えるうえで

<a href="#"/>

といったhrefでよく見る書き方を真似したんだと思う。
これで何が起きるか・・・Chromeのコンソールみると、

Resource interpreted as Image but transferred with MIME type text/html: "http://ushisantoasobu.jp/test/list/show".

こんなのが表示されていた。

いまローカルにあるhtmlに上のコード追加してブラウザで表示してみても同じエラー出た。
でなんとこれ、エラーメッセージ通り「画像として解釈されたけど、htmlとして転送します」ということで、再度ページ自体をロードするんす・・・（赤矢印部分）。

f:id:ushisantoasobu:20140305012509p:plain

これのお陰でトークンが再度サーバ側で新しく発行されてトークンエラーが出ていた。

恐ろしいソース。。。

ということで

<img src=""/>

こうした。こうすると、ブラウザによっては空のURLにアクセスして無駄な通信走らすみたいな記事もみかけたけど、それ以上に、AndroidのWebViewで表示したときに動かなくなってしまった。。。

ここ慌てて修正してしまったので（リリース間近だった）、どのように動かなくなったのかをイマイチちゃんと調べきれてない。今度ちゃんと調べてみよう（はじめのと同じパターンなのかも）。

結局は

<img />

そもそもsrc属性は後で追加するということで問題なくなった。

1*1ピクセルの透明の画像を入れるということをしている同僚もいるようだ。

今更こんなことにハマってなんか嫌だなふむ。。




（余談）

早速使ってみた。