BeautifulSoup上でimgタグが表示されない

Question

前提・実現したいこと

BeautifulSoupでimgタグを見つけたい

発生している問題・エラーメッセージ

気象庁HPの画像をスクレイピングしようとしましたが、HPの検証で出てくるimgタグの部分がsoupには記述されておらず、取得できません

該当のソースコード

import requests
from bs4 import BeautifulSoup, Comment
from PIL import Image
import io

url = 'https://www.data.jma.go.jp/gmd/kaiyou/data/db/kaikyo/daily/sst_HQ.html'
res = requests.get(url)
#print(res)

soup = BeautifulSoup(res.text, 'html.parser')
for script in soup.find_all('script',src=False):
    script.decompose()
for comment in soup(text=lambda x: isinstance(x,Comment)):
    comment.extract()
# print(soup)
div_tags = soup.find_all('div')
print(div_tags[12])

試したこと

以下が上のコードの実行結果です。

<div id="right">

</div>

以下がHPの検証からコピーしてきた該当div部分です。

<div id="right">
  <script type="text/javascript">
  <!--
    var i,pr,strtmp,stryye,strmme,strdde
    for (i =0; i< document.input.yoso2.length; i++) {
        if (document.input.yoso2[i].checked){
          pr = sYoso1[0] + "D" + document.input.yoso2[i].value;
        }
    }
    strtmp = num2str_ymd(yye, mme, dde);
    stryye = strtmp[0];
    strmme = strtmp[1];
    strdde = strtmp[2];
    var fname1 = pr + "_" + strArea[areano] + stryye + strmme + strdde + ".png";
    document.write("<IMG name='img' alt='日別海面水温図' src=" + ImgDir + strArea[areano] + "/" + stryye + "/" + fname1 + ">");
  //-->
  </script><img name="img" alt="日別海面水温" src="./image/HQ/2021/sstD_HQ20211210.png">
</div>

divタグ内最後の行にあるimgタグは残ってほしいのですが、スクリプトとコメントを除去したら何も残らない結果となっています。
初学者につき原因が分かりません。
どなたかお分かりの方がいらっしゃれば教えて頂ければ幸いです。よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

Python3.10.0

Answer 1

JavaScriptで画像が追加されているため、ブラウザのエンジンを通してJavaScriptを実行しないと描画されず取得できないため、ブラウザのエンジンを通す必要があります。
一番簡単なのはSelenium WebDriverというブラウザを自動で動かすライブラリを使用する方法で、実際にブラウザで表示されたままを取得することができます。
Selenium入門 Pythonでブラウザを自動化したい方必読！

Comments

[ugeno]

早速の回答をいただきありがとうございます！
ほかのページでも似たようなことになっていたのですが、なるほどそういうことなんですね。
WebスクレイピングはBeautifulSoupで完結するものかと勘違いしておりました。
ありがとうございました。大変助かります。

[NeRight719]

お役に立ててよかったです。
Seleniumはその他にマウスのクリックを再現したり、フォームに文字を入力するといったことも可能なので、例えば「ボタンをクリックをした時にJavaScriptが変更を加えた要素」とか「フォームに入力した情報をもとに生成される画面」のスクレイピングも可能です。
少し準備が面倒かもしれませんが、できることが増えるので調べてみてください。