このウェブサイトからバナー画像を検査してダウンロードするにはどうすればよいですか?

このウェブサイトからバナー画像を検査してダウンロードするにはどうすればよいですか?

Google Chrome の [検査] メニューまたは別の手順を使用して、この Web サイトのバナーの上部に表示される帽子をかぶった男性の画像を抽出して保存するにはどうすればよいですか? 検査ディレクトリで画像の場所を見つけることができませんでした。

https://www.splcenter.org/hatewatch/2018/09/18/ok-sign-white-power-symbol-or-just-right-wing-troll

答え1

background-image親要素にはプロパティがあります<header class="group-header">。具体的には、group-headerクラスは次のようになります。

.group-header {
    background-image: url(https://www.example.com/sites/default/files/styles/splc_page_banner/public/milo-handsign.jpg?itok=HYGSWMjR);
}

(ドメイン名を例示しました。)

画像が検査している要素のすぐ上にない場合は、DOM を上に移動します。親要素、祖父母要素などにある可能性があります。

ただし、DOM をナビゲートすることが、必ずしも画像を見つける最も簡単な方法であるとは限りません。[ソース] タブに移動し、リストを下にスクロールして画像に移動し、必要な画像を探します。

関連情報