画像とテキストを紐づけてランダム表示にしたいが特殊文字の処理がわからない

##実現したいこと
ポートフォリオとしてドイツ語の単語ゲームを制作途中で、サーバーにデプロイしたところ、
ドイツ語特有の特殊文字（ä, ö, ü）を含む単語の画像が表示されません。
画像のファイル名と単語をJavascriptで紐づけてランダムに表示させているのですが、
特殊文字がサーバー上では読み込まれていないようです。

##コード

main.js
1
2  const question = document.getElementById('js-image');
3  const target = document.getElementById('js-target');
4  const correctSound = document.getElementById('js-correct');
5  const tipeSound = document.getElementById('js-tiping');
6  const gameSetSound = document.getElementById('js-gameSet');
7  const start = document.getElementById('js-start');
8  const replay = document.getElementById('js-replay');
9
10  const words = [
11    'Hund','Katze','Vogel','Pinguin','Frosch',
12    'Schwein','Elefant','Löwe','Hase','Kuh',
13    'Schaf','Schlange','Nilpferd','Schildkröte','Wal',
14  ];　//ここではLöweとSchildkröteがエラーに該当します。
15
16  let word;
17  let loc = 0;
18  let startTime;
19  let isPlaying = false;
20
21  function setQuiz(){
22      word = words.splice(Math.floor(Math.random()* words.length),1)[0];
23      loc = 0;
24      target.textContent = word;
25      const images = [
26        'img/Hund.png','img/Katze.png','img/Vogel.png','img/Pinguin.png','img/Frosch.png',
27        'img/Schwein.png','img/Hase.png','img/Kuh.png','img/Nilpferd.png','img/Elefant.png',
28        'img/Schildkröte.png','img/Wal.png','img/Löwe.png','img/Schaf.png','img/Schlange.png',
29      ];
30      let img;
31      img = `img/${word}.png`; //ファイル名と単語を紐づけ
32      question.src = img;
33      question.classList.add('c-img__pc-size');
34    }
35
36  function gameReplay() {
37    question.style.display = 'none';
38    replay.href = 'section1_mobile.html';
39    replay.textContent = 'Replay?';
40    replay.classList.add('c-btn','c-btn-replay');
41  }
42
43
44  target.addEventListener('click', ()=> {
45      if (isPlaying === true){
46        return;
47      }
48      isPlaying = true;
49      startTime = Date.now();
50      target.classList.remove('c-btn','c-btn-start','p-start-btn__text');
51      start.classList.add('c-start-btn_active','c-start-btn_active2');
52      target.classList.add('p-game__text');
53      setQuiz();
54    });
55
56   document.addEventListener('keydown', e => {
57     if (e.key !== word[loc]) {
58       return;
59     }
60     tipeSound.currentTime = 0;
61     tipeSound.play();
62     loc++;
63     target.textContent = '_'.repeat(loc) + word.substring(loc);
64
65     if (loc === word.length){
66       if (words.length === 0) {
67          const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(2);
68          const result = document.getElementById('js-result');
69          result.textContent = `Fertig! ${elapsedTime} Sekunden!`;
70          gameSetSound.play();
71          setTimeout(gameReplay,1000);
72          return;
73       }
74       correctSound.currentTime = 0;
75       correctSound.play();
76       setQuiz();
77      }
78   });
79

HTML
1<!DOCTYPE html>
2<html lang="de">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="preconnect" href="https://fonts.gstatic.com">
7<link href="https://fonts.googleapis.com/css2?family=Shrikhand&display=swap" rel="stylesheet">
8<script src="https://kit.fontawesome.com/749f9d0226.js" crossorigin="anonymous"></script>
9    <link rel="stylesheet" href="css/ress.css">
10    <link rel="stylesheet" href="css/style.css">
11  </head>
12  <body>
13    <div class="l-main l-main-mobile-mode">
14      <div class="l-desc__wrapper">
15        <p class="p-game-desc__text" id="js-hide">Type as fast as you can!</p>
16        <p class="p-sound__text"><i class="fas fa-volume-up fa-lg c-img-volume"></i> turn on the sound!</p>
17      </div>
18      <ul class="l-game__wrapper">
19        <li class="c-game-img"><img class="u-image_margin" id="js-image"><a id="js-replay"></a></li>
20        <li class="c-btn c-btn-start" id="js-start">
21          <p class="p-start-btn__text" id="js-target">Start!<br>  </p>
22        </li>
23        <li class="c-result">
24          <p class="p-result__text" id="js-result"></p>
25        </li>
26      </ul>
27      <div class="l-back__wrapper"><a class="c-btn-back" href="index.html">
28          <p class="p-btn-back__text"><i class="fas fa-angle-left c-img-left"></i> Top</p></a></div>
29      
30    <audio id="js-correct" src="audio/correct.mp3"></audio>
31    <audio id="js-tiping" src="audio/tipe.mp3"></audio>
32    <audio id="js-gameSet" src="audio/gameSet.mp3"></audio>
33    <footer class="l-footer">
34      <p class="p-footer__copyright"><small>&copy; 2020 Allrights Reserved.</small></p>
35    </footer>
36    <script src="main.js"></script>
37  </body>
38</html>

##エラーの内容
ファイル名と単語を紐づけて、ランダム表示する方法自体が
無理矢理感があるなとは思っていたものの、
ローカルで開発している間は問題がなかったためこのまま進めていました。
しかし、サーバーにデプロイすると、特殊文字の含まれた画像だけが表示されません。
ファイル名に特殊文字が使われているからサーバー側で認識されていないとすると、
どのように画像とテキストを紐づければ良いか、代替策が思いつきません。
完全独学なので、醜いコードかと思いますが何かアドバイスいただけますと、
非常に助かります。