S3の画像をmysqlデータベースから画像のURLを取得して表示します

Question

私は動的なWebプロジェクトを持っていますが、この中で私はAWSインスタンスのmysqlデータベースから要素を表示しようとしています。 私のデータベースには、多くの要素（name、city、imageURL）があり、imageURLはamazon S3の画像からのURLです。

URLを直接入力するとイメージが表示されますが、mysqlデータベース（JavaScript関数を使用）からURLを取得すると、console.log(imageURL)というURLが表示されますが、イメージは表示されません表示され、このエラーが発生しました：

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

これはなぜ機能しないのですか？

EDIT：これは私の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\"/>"

お知らせ単語 "クラス" の前にスペース。