javascriptをエラーの改善

実現したいこと

画像を表示したい。

前提

javascriptでwebサイトを作っています。
要素が横からフワッと表示されるようなjavascriptを実装した際に画像が反映されなくなりました。
javascriptを実装する前は画像が表示されていました。

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

エラーメッセージ


Not allowed to load local resource: file:///Users/sousuke/%E3%83%95%E3%82%99%E3%83%AC%E3%82%A8%E3%83%A1%E3%83%B3/img/seafood1.jpg

----------------------html----------------------

<li class="shift">
          <div class="our-box">
            <h2>北海道厚岸直送　活丸牡蠣</h2>
            <p>信頼と実績。厚岸漁港の取引先とは長年のお付き合い。
              毎週、厚岸から産地直送の厳選素材が送られてくるのは調布で唯一彦べえだけ。北海道厚岸の丸牡蠣は冷たい海水温で日本で唯一、年間を通して生ガキが食べられます。 栄養豊富な海で育った丸牡蠣の味は濃厚。
              生・焼・蒸し・グラタンでお召し上がりください。その他にも産地直送の新鮮な刺身を日替わりでご用意しています</p>
          </div>
          <img src="https://github.com/matsuyas0120/buremen.Site/blob/main/seafood1.jpg?raw=true" alt="">
        </li>


----------------------css----------------------       

.shift {
  opacity: 0;
  transform: translatex(20px);
  transition: opacity .5s, transform .5s;
}

.shift:nth-child(2n) {
  opacity: 0;
  transform: translatex(-20px);
  transition: opacity .5s, transform .5s;
}

.shift.active {
  opacity: 1;
  transform: translateY(0);
}


----------------------javascript----------------------

{
  const targets = document.querySelectorAll('.shift');


  function callback(entries, obs) {
    console.log(entries);

    entries.forEach(entry => {
      if(!entry.isIntersecting) {
        return;
      }

      entry.target.classList.add('active');

      obs.unobserve(entry.target)
    });
  }

  const options = {
    threshold: 0.2,
    rootMargin:'0px 0px -100px',
  }

  const observer = new IntersectionObserver(callback, options);

  targets.forEach(target => {
    observer.observe(target);
  })
}

試したこと

画像のアドレスをコピーしてimgタグのsrcにコピペしましたが反映されませんでした。
ご教授いただけますと幸いです。
githubで画像を表示し画像のアドレスをコピーをしたり、finderから画像を表示し画像のアドレスをコピーをしたりしましたが反映されませんでした。
他にもネットで調べてコードを改善してみましたが分かりませんでした。

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

独学で至らない点も多いかと思いますがご教授いただけますと幸いです。
また、他にもコードでの改善点だったり自分が書いた質問内容の中で足りないところがありましたら、ご教授いただけますと幸いです。

yambejp

2023/05/16 06:00

エラーはローカルファイルを読むことになっていますが、ソースはgithubですね？ただしいソースを提示されていますか？

sosuke_m

2023/05/17 08:49

コメントありがとうがざいます。おっしゃっられてる通りソースはgithubになっています。エラーはgithubからクロームで表示した際にコンソールに出たエラーになっています。ソースコードはgithubからをコピペさせてもらいました。プログラミングも勉強し始めで、質問するのもgithubを使うのも初めてでわからない点が多く正しいソースが掲示されていなっかたかもしれません。お手数ですがどういったところが不足、間違っている可能性があるのか教えていただいてもよろしいでしょうか。返信いただけますと幸いです。