javascript - 将背景图片 url 分配给模板中的 div

Question

我有一个函数 drawPlaceDetails，它为 html 模板赋值。 getPhotoURL() 函数返回图像的 url 链接。 我需要将此 url 分配给 background-image 属性。 我得到的只是一个没有图像的空 div。我已经通过将它们打印到控制台来验证 url，它们似乎打开了一个图像。

模板代码及功能如下:

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

Answer 1

这是您的问题。

这是我从您上面的评论中提取的。
假设是console.log(result);

的console.log()

{formatted_address: "1075 Tully Rd #32, San Jose, CA 95122, United States",
 geometry: Object,
 icon: "maps.gstatic.com/mapfiles/place_api/icons/…;,
 id: "1c5dc234baffda29dec83b094b3b806e8f88befe",
 name: "Little Caesars Pizza"…}

 formatted_address:"1075 Tully Rd #32, San Jose, CA 95122, United States"
 name:"Little Caesars Pizza"
 photos:Array[1]
 place_id:"ChIJkyfsN-oyjoARYaF41nKnA5w"
 price_level:1
 rating:3.7 
} 

这是一个格式错误的对象。
在 "Little Caesars Pizza"

之后缺少许多 , 和一个额外的括号 }

我不能说这个对象中的 ...。
您似乎隐藏了一些代码。

编辑

尝试获取我现在在您的编辑中看到的这个 restaurant-71.png(控制台快照):

var photo = result.result.html_attributions[0].icon;
console.log(photo);