本番環境にいれてサムネイルをクリックすると真っ暗になる

Question

<section class="chara">
      <div class="chara-img">
        <p class="txt">フィリピン<br>（リサール）</p>
        <img src="img/SNSicon_%E3%83%95%E3%82%A3%E3%83%AA%E3%83%94%E3%83%B3.png">
      </div>
      <div class="chara-img">
        <p class="txt">日本<br>（釜本）</p>
        <img src="img/SNSicon_%C3%AC%CB%99%C3%B1%7B.png">
      </div>
    </section>


css

  .chara {
    width: 90%;
  }

  .chara-img {
    flex: 0 0 25%;
    padding: 10px 10px
  }

  .chara-img .txt {
    font-size: 0.6rem
  }


js


  <script>
    'use strict';
    $(function() {

      $('.chara-img').on('click', function() {
        var imgsrc = $(this).children('img').attr('src');

        $('.modal').addClass('open');
        $('.modal').children('img').attr('src', imgsrc)

      });
      $('.modal p').on('click', function() {
        $('.modal').removeClass('open');

      });
   });

  </script>

ローカル環境ではサムネイル画像をクリックするとモーダル画面に画像が表示されるのですが、本番環境にアップしたら、モーダル画面に画像が表示されなくなります。
どうすれば表示されるようになるのか教えていたあだ着たく思います。

Answer 1

画像のパスが違うのでは

<img src="img/SNSicon_%E3%83%95%E3%82%A3%E3%83%AA%E3%83%94%E3%83%B3.png">

<img src="img/SNSicon_%C3%AC%CB%99%C3%B1%7B.png">

imgディレクトリ以下に画像が入ってますか確認してください。