如何使用 <img src= > 與Ajax通話

Question

我正在嘗試使用Ajax GET將圖片插入ID為“ pokedex-view”的圖片。 我認為“ spriteurl”顯示了正確的路徑。 但是不能正常工作，並且找不到本地文件夾的名稱。 這段代碼有什么問題嗎？ 謝謝。

    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

嘗試串聯或插值將spriteurl分配為src屬性的方式：

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

要么：

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