console.logって意外な使い方ができるってご存知ですか？
文字を赤くしたり……
console.log(
'%c赤い文字',
'color: red;',
);
文字を大きくしたり……
console.log(
'%c20pxの文字',
'font-size: 20px;',
);
URLのリンクを表示したり……
console.log(
'https://shigurezuki.jp のようなURLは自動的にリンクになったり',
);
こんな感じにCSSで装飾をすることが可能なんです。（すべてのプロパティが使えるわけではありません）
画像も
画像を表示することもできます。
const imageUrl = 'https://shigurezuki.jp/res/img/logo_white.png'
console.log(
'%c ',
`background-image: url(${imageUrl}); background-size: 100% 100%; padding: 80px 200px`,
);
みたいに。
しかし……
いつからかはわかりませんが、2022年の4月か5月ごろだと思うのですが、いつの間にか上記のようにbackground-image: url('https://example.com/img.png')みたいに画像のURLを指定してもChromeでは表示されなくなってました。
当初はちょうどブログの改修をしていたので、なにか手違いで表示できなくなってしまったのかと思って色々調べてみましたが、他のサイトで同様にconsole.logで画像を表示しているサイトも見れなくなっていたのでChrome側の問題と認識しました。
これはWindows版、mac版ともに発生しています。
ちなみに拡張機能とかが影響しているのかと思ってシークレットモードでも試したましたがだめでした。
回避策
background-imageはなにもURLだけを受け付けているわけではないのは御存知の通りだと思います。
<img src>同様にbase64(data uri)でも表示が可能となっています。
なので、background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACJ（以下略）')のように画像URLからdata uriを生成することで、それを指定して表示させることが可能です。
このことから、恐らくconsole.log内でのhttp通信が発生しなくなったのかなと思っています。（面倒なので過去のバージョンでの確認はしていませんが）
しかしこれ誰もつぶやいていなくて自分だけの事象なのかとちょっと不安になっています。（検索が下手なだけですかね？）