I have a dynamic web project and in this one I try to display elements from a mysql database on an AWS Instance. So, in my database, I have many elements (name, city, imageURL) and the imageURL is an URL from an image in an amazon S3.

In my html code, if I put the URL directly, the image is displayed but if I get back the URL from the mysql database (with a javascript function), I got the right url with console.log(imageURL) but the image is not displayed and I have this error :

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

So do you know why this doesn't work ?

EDIT : This is my javascript code :

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;
}