javascript - 通过从 mysql 数据库获取图像的 URL 显示来自 S3 的图像

Question

我有一个动态 Web 项目，在这个项目中，我尝试显示 AWS 实例上 mysql 数据库中的元素。 因此，在我的数据库中，我有许多元素(名称、城市、imageURL)，imageURL 是来自亚马逊 S3 中图像的 URL。

在我的 html 代码中，如果我直接输入 URL，则会显示图像，但如果我从 mysql 数据库(使用 JavaScript 函数)返回 URL，我会使用 console.log( imageURL) 但图像未显示，并且出现此错误:

GET https://s3-us-west-2.amazonaws.com/.... 403 (Forbidden)

那么你知道为什么这不起作用吗？

编辑:这是我的 JavaScript 代码:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
}
};
xhttp.open("GET", "rest/restaurants", true);
xhttp.send();

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var name;
    var id;
    var imageURL;
    var htmlText = "";

for (i = 0; i< xmlDoc.getElementsByTagName("id").length; i++){
    name = xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue;
    id = xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue;
    imageURL = xmlDoc.getElementsByTagName("imageURL")[i].childNodes[0].nodeValue;

    console.log(imageURL);

        htmlText = htmlText + 
        "<div class=\"Popular-Restaurants-grid\">" +
        "<div class=\"col-md-3 restaurent-logo\">" +
        "<img src="+ imageURL + "class=\"img-responsive\"/>"+
        "</div>"+
        "<div class=\"col-md-2 restaurent-title\">"+
        "<div class=\"logo-title\">"+
        "<h4 id=\"test\"><a href=\"#\">" + name + "</a></h4>"+
        "</div>"+
        "</div>"    
        }
    document.getElementById("restaurantsContainer").innerHTML = htmlText;
}

Answer 1

您当前的代码生成如下 URL:

<img src=https://s3-us-west-2.amazonaws.com/someText/text/logo1.jpgclass="img-responsive"/>

在此行中添加一个空格:

"<img src="+ imageURL + "class=\"img-responsive\"/>"

看起来像:

"<img src="+ imageURL + " class=\"img-responsive\"/>"

注意“class”一词之前的空格。