画像のクリックでメイン画像切り替え（JS）

Question

前提・実現したいこと

JSの学習をしております。

・質問の内容
画像のクリックでメイン画像がクリックした画像に
切り替えをするコーディングを記載しましたが
一度押すとメインの画像が無くなってしまいます。
どのように記載すれば、無くならないですか？

エラーメッセージ
net::ERR_FILE_NOT_FOUND

該当のソースコード

let thumbs = document.querySelectorAll('.thumb');
for(let i = 0; i<thumbs.length; i++){
thumbs[i].onclick = function(){
document.getElementById('bigimg').src = this.dataset.image;
}
};

ソースコード
<section>
<div class="center">
  <div>
    <img src="imgsou.jpg" id="bigimg">
  </div>
  <ul>
    <li><img src="imgsou.jpg" class="thumb" date-image="IMGsou.jpg"></li>
    <li><img src="imgsou2.jpg" class="thumb" date-image="IMGsou2.jpg"></li>
    <li><img src="imgsou3.jpg" class="thumb" date-image="IMGsou3.jpg"></li>
  </ul>
</div>
</section>

```html

### 試したこと
Googleで検索しましたが、同様の事象が無かったです。

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

ここにより詳細な情報を記載してください。

Comments

[skys215]

ERR_FILE_NOT_FOUNDだと、画像のURLが待ちっがてるからだと思られます。
画像のURLを再確認してください。

[ariyo]

おっしゃる通りでした。１文字違いました。ありがとうございます。

[kei344]

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

[ariyo]

初めてでやり方が分かっておりませんでした。ご指摘ありがとうございます。

Answer 1

<li><img src="imgsou.jpg" class="thumb" date-image="IMGsou.jpg"></li>

上記の部分の
date-image
⇨data-image
と画像のURLを修正しましたら直りました。
お手数おかけしました。

Answer 2

ファイルパスがないようです。srcをfull_pathにしたら、動く気がします。

https://www.#{your domain}.jp/imgsou.jpg

/指定もいけるはず

/imgsou.jpg

Comments

[ariyo]

タイプミスでした。助かりました。ありがとうございます。