<img src= >をAjaxで呼び出す方法

Question

「pokedex-view」というIDにAjax GETを使用して画像を挿入しようとしています。私は "spriteurl"が正しいパスを示していると思います。しかし正しく動作せず、ローカルフォルダのpcitureが見つかりません。このコードに何か問題がありますか？ありがとう。

function populatePokedex() { 

    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", "https://webster.cs.washington.edu/pokedex/pokedex.php?pokedex=all"); 
    xhr.onload = function(){ 
     if (this.status == 200) { 
      var picArr = this.responseText.split("\n"); 

      for(var i=0; i < picArr.length; i++){ 
       var eachName = picArr[i].split(":") 
       var spriteurl = "/Pokedex/sprites/" + eachName[1]; 
       document.getElementById("pokedex-view").innerHTML += spriteurl 
       document.getElementById("pokedex-view").innerHTML += "<img src = spriteurl>"; 
      } 
     } else { 
      document.getElementById("pokedex-view").innerHTML = "ERROR: Status: " + this.status + ", " + this.statusText; 
     } 
    } 
    xhr.onerror = function(){ 
     document.getElementById("pokedex-view").innerHTML = "ERROR"; 
    } 
    xhr.send(); 
    } 

Answer 1

連結するか、src属性としてspriteurlを割り当てる方法を補間してみてください：

document.getElementById("pokedex-view").innerHTML += '<img src="' + spriteurl + '">' 

または：

document.getElementById("pokedex-view").innerHTML += `<img src="${spriteurl}">`