如何在Ajax调用中使用<img src=""/>

时间:2017-05-06 23:24:31

标签: javascript ajax src

我正在尝试使用Ajax GET将图片插入id“pokedex-view”。我认为“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();
    }

1 个答案:

答案 0 :(得分:2)

尝试连接或插入spriteurl作为src属性的方式:

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

或者:

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