I have a drawPlaceDetails function that populates an HTML template with values. The getPhotoURL() function retrieves a URL link to an image, which I am trying to assign to the background-image property. However, the div remains empty without displaying the image. I have confirmed that the URLs are valid by logging them to the console and verifying that they do lead to images.
Below is the template code and related functions:
<script type="text/html" id="places-template">
<li>
<div class="placesCard">
<div id= "places-name" class="places-name">${name}</div>
<div id= "places-img" style="height:40px;width:40px; border:1px black solid"></div>
<div id="places-address" class="places-address">${formatted_address}</div>
</div>
</li>
function drawPlaceDetails(results){
$("#places-list").append("<ul></ul>");
for(var i=0; i<results.length; i++){
var result = results[i];
console.log(result);
var photo = getPhotoURL(result.photos);
$("#places-template").tmpl(result).find("#places-img")[0].style.backgroundImage = "url('" + photo + "')";
$("#places-template").tmpl(result).appendTo( "ul" );
}
}
function getPhotoURL(photos){
if(photos){
return photos[0].getUrl({'maxWidth': 35, 'maxHeight': 35});
}
https://i.sstatic.net/aEB7x.png https://i.sstatic.net/XGv1K.png