簡単なクイズアプリの作成JavaScriptについて

Question

出てくる画像に対して、それが何かを答えるwebクイズアプリを作成しています。
HTMLで言うとdiv（aaa）の部分に、JavaScriptの配列で用意した画像が載るようにしたいのです。
アドバイス頂いたinnerHTMLで記述してみましたが、imgファルダの中に入っているはずの画像が反映されません、、、

HTML

 <section id="question" class="frame">
          <div id="quizimage">aaa</div>
          <h1></h1>
        </section>
        <section id="answer_option">
          <ul>
            <li class="answer_item">
              <a href="#next_btn"></a>
            </li>
            <li class="answer_item">
              <a href="#next_btn"></a>
            </li>
            <li class="answer_item">
              <a href="#next_btn"></a>
            </li>
          </ul>
        </section>

JavaScript問題表示

//問題文と選択肢を表示する
  let setQuiz = () => {
    isAnswered = false;
    quizimage.innerHTML = quizData[currentNum].p;
    question.textContent = "問題" + (currentNum + 1) + ". " + quizData[currentNum].q;
    shuffledAnswers = shuffle(quizData[currentNum].a.slice());
    explain.style.display = "none";
    for(let i = 0; i < shuffledAnswers.length; i++){
    answer_option[i].classList.remove('correct');
    answer_option[i].classList.remove('wrong');
    answer_option[i].textContent = shuffledAnswers[i];
    }
  }

JavaScript問題配列

const quizCategory = [
  {animal: [
      {p: '<img src="../img/dog.jpg">',
       q: 'この動物の名前は？',
       a: ['A','B','C'], 
       e: '~~~~~~~解説~~~~~~~'},
      {p: '<img src="../img/dog.jpg">',
       q: 'この動物の名前は？',
       a: ['A','B','C'], 
       e: '~~~~~~~解説~~~~~~~'},
      {p: '<img src="../img/dog.jpg">',
       q: 'この動物の名前は？',
       a: ['A','B','C'], 
       e: '~~~~~~~解説~~~~~~~'},
  ]},
];

let quizDataAll = quizCategory[0].animal;

Answer 1

画像へのパス..img/dog.jpgが間違ってます。
画像とHTMLの位置関係にもよりますが、正しくは../img/dog.jpgだと思います。
相対パスに関してしっかり学習しましょう。

Comments

[o-fk]

結果変わりませんでした、、、

[miyabi_pudding]

ならば、画像とHTMLの位置関係がわかるような、フォルダの状態を、
キャプチャでいいので、質問に載せてください。

[miyabi_pudding]

パスが間違っているだけだと思うので、それがわからないと、回答しようがありません。
そして、相対パスに関して学習し、自身でももうちょっと、なぜ表示されないのか考えてみましょう。

Answer 2

ものすごく古典的で非標準だが、どのブラウザにも実装されているinnerHtmlというのが便利です。
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML

いろいろありますが、とりあえずそこからスタートするのは悪くないと思います。

Answer 3

パスを変更したら画像表示されました。

Comments

[kei344]

【質問をした後に自己解決してしまった --- ヘルプ｜teratail（テラテイル）】
https://teratail.com/help#resolve-myself
> 後から読む人のためにも、具体的な解決手順を記載してください。

[miyabi_pudding]

別に自分の事言うわけではないですし、BA欲しいわけではないですが、
相対パスに関して言及した私の回答でいいと思うのですが・・・。