如何在 Ajax 调用中使用 <img src= >答案

【问题标题】：How to use <img src= > with Ajax call如何在 Ajax 调用中使用 <img src= >
【发布时间】：2017-05-07 07:30:26
【问题描述】：

我正在尝试使用 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();
    }

【问题讨论】：

您的 html 是什么样的，特别是与 pokedex-view 相关的部分？

标签： javascript ajax src

【解决方案1】：

尝试连接或插入将spriteurl 分配为src 属性的方式：

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

或者：

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

【讨论】：

是的，我做到了！这很有帮助。