Question

我有一个动态Web项目，在这个项目中，我尝试在AWS Instance上显示mysql数据库中的元素。因此，在我的数据库中，我有许多元素（name，city，imageURL），imageURL是来自亚马逊S3中图像的URL。

在我的html代码中，如果我直接放入URL，则会显示图像，但如果我从mysql数据库中获取URL（使用javascript函数），我会使用console.log(imageURL)获得正确的URL，但是图像未显示，我有这个错误：

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

您当前的代码会生成以下网址：

<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\"/>"

注意单词＆＃34; class＆＃34;。

之前的空格

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

1 个答案: