リンクに問題ないのに、画像が表示されない → 広告だと思って削除されていた【HTML CSS】

背景

スポンサーのページがあるWebサイトを公開したら、スポンサーのロゴ画像が表示されてないと連絡がきた。

詳細

連絡の内容によると、Mac の Google Chrome でのみ表示されないらしい。（safari や Windowsだと表示される）

しかし、私のPC(Mac)の Google Chrome では表示されている。
→ Chromeのバージョンもしくは、そのPCだけの問題ではないか？

と思い、検証ツールを開いてスクショを撮って送ってもらった。

• 検証ツール内の画像リンクを確認するが、画像ファイルにはアクセス可能。
• imgタグのCSSのdisplayプロパティが消されてる。 display: block; になっている。← めちゃくちゃ怪しい

結論

• 広告ブロックのChrome拡張 (Adblock Plus) が勝手に画像を消していた。
• WindowsのChromeにAdblockを入れても表示されるが、なぜかMac版だと消される。

スポンサーのロゴを広告と認識したのかな？　こればっかりはこっちがどうしようもない……

検証ツールで display: block !important; を上書きすると、取り消し線はなくなったが、表示はされなかった。
もし似たような状態が報告された時は、拡張機能を疑ってかかると良さそう。

広告をブロックする拡張機能は、いれない方がいいけれどいれてる人は結構いそう。

対策

CSSクラスに sponsor という文字が入らないようにする。

imgタグに、 .sponsor_logo というスタイルを当てていたが、試しに .sp_logo にすると表示された。

2021/3/30追記

1. Windowsでも画像が表示されない似たような不具合があるらしい。
2. ad って文字もだめらしい。

参考ツイート: