将背景图片网址指定给模板

时间:2016-06-26 23:30:24

标签: javascript jquery html css

我有一个函数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});     
}

enter image description here enter image description here

1 个答案:

答案 0 :(得分:0)

这是您的问题。

我从你上面的评论中得到了这个 假设它是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);