Tengo un proyecto web dinámico y en este trato de mostrar elementos de una base de datos mysql en una instancia de AWS. Entonces, en mi base de datos, tengo muchos elementos (nombre, ciudad, imageURL) y imageURL es una URL de una imagen en Amazon S3.

En mi código html, si coloco la URL directamente, se muestra la imagen, pero si obtengo la URL de la base de datos mysql (con una función javascript), obtuve la URL correcta con console.log(imageURL) pero la imagen es no se muestra y tengo este error:

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

Entonces, ¿sabes por qué esto no funciona?

EDITAR: Este es mi código 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; }