Set a background image URL for a specific division inside a template

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

Answer №1

Here's the issue at hand.

Extracted from your earlier comment:
Seems to be the output of console.log(result);

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

This seems to be an improperly structured object.
There are multiple missing , and an extra bracket } after "Little Caesars Pizza"

I'm unsure about the ... within this object.
It appears that you've hidden some code.

UPDATE

Attempt to access the image restaurant-71.png that I noticed in your revised console output:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting script not detecting changes in form

I am currently implementing a script to detect any changes in the form fields and notify the user if there are any. However, instead of triggering the alert box as intended, a different JavaScript box is displayed. Despite my efforts, the script is not re ...

conflict arose due to file size validation in the form

This code is able to verify height, width, and file format. How can I incorporate file size validation into my source code? Also, when I use this code in a form, it does not work properly. $(function() { $("#upload").bind("click", function() { //G ...

Checkboxes display on a separate line when rendered inlines

I'm having an issue with the rendering of my checkbox in CSS. The checkbox is currently displaying on a separate line from the text, but I would like it to be inline with the rest of the content. For reference, here is the full CSS and HTML code: htt ...

Tips for achieving vertically centered text wrapping around a floating image

Describing it in words is proving to be difficult, so let me just illustrate it for you. In the following images, the horizontal lines represent the "text", the small box symbolizes the image, and the larger box encompasses the entire webpage. My goal is ...

What is the best way to add all the items from an array to a div element?

I am currently facing an issue where only the last object in my array is being added to my div using the code below. How can I modify it to add all objects from the array to my div? ajaxHelper.processRequest((response: Array<Vehicle.Vehicle>) ...

Generate additional tabs

Currently, I am in the process of working on a project where I have a bar that will contain dynamically filled tabs. My goal is to include a (+) image that becomes visible when the bar is full. When a user clicks on this image, the remaining tabs should ap ...

Filtering a List Using Angular

I am working on a code where I need to filter a list of elements based on the option selected from a combobox. Currently, my code is error-free but I am unable to successfully filter the list. Can someone please guide me on what steps I should take next? ...

Personalized Owl Carousel - OWL.JS Hover Pause Feature

I have been working on a slider in Codepen that is functioning well, and now I am trying to tweak it for my website. My goal is to make the carousel pause when someone hovers over it. I've experimented with all the options available on the owl slider ...

Remove the class upon clicking

I recently created a toggle-menu for my website that includes some cool effects on the hamburger menu icon. The issue I am facing is that I added a JavaScript function to add a "close" class when clicking on the menu icon, transforming it into an "X". Whil ...

The JavaScript for loop using .appendChild() is inserting the values of the final object, represented as [object object], into the HTML document

$(document).ready(function () { GetDetails(); }); function GetDetails() { let albumlist = document.getElementById("album-list"); $.ajax({ url: '/Store/browseajax', type: 'GET', data: { id: '@ ...

Guide on importing a Blender scene into three.js with textures, lighting, and camera

I successfully exported a single object (box.json) and scene (box2.json) from Blender using io_three. Additionally, I was able to load a single object (box.json) with textures using JSONLoader() in the modelWithTexture.html file. My goal is to load an ent ...

Partial functionality noticed in Bootstrap navbar CSS

I seem to be encountering a peculiar issue with Bootstrap 3.3.6 CSS, where it is only partially functioning. Despite ensuring the proper structure of the site (correct classes in the right places, etc.), it appears that some of the CSS styles are missing. ...

An issue occurred while trying to process the XHR response text for files of a large size

I've been using the Jquery fineUploader to upload files and I've encountered the following error message: 404 - File or directory not found. This error occurs when trying to upload files larger than 30MB, while smaller files below 30MB upload w ...

Converting Excel VBA code to Javascript for use in Google Sheets: A step-by-step guide

Hello everyone, I am looking to convert a VBA code that I wrote into javascript and integrate it into Google Sheets. Does anyone have any suggestions on how I can accomplish this task? The VBA code in question is as follows: Sub Influencers_automacao() ...

Is there a way to automatically compress Express JS assets?

Is there a way to dynamically minify the frontend JavaScript/CSS of my Express JS application? Are there any potential drawbacks to this approach? ...

December Monthly Calendar Edition

My code using jQuery FullCalendar was working perfectly until December rolled around. For some reason, the events function is setting calMonth to 0 and calYear to 2018. I can go back to November without any issues, but I do have events scheduled for Decemb ...

Is there a way to append a menu to a specific element instead of just the <body> tag using appendTo()?

When utilizing the Jquery Context menu on my webpage, I noticed that all HTML code is being displayed inside the BODY tag. However, I require this HTML code to be contained within my div with the ID of "mydiv" just before it closes. This is necessary due ...

Guide on presenting mysql results in a more visually appealing way by displaying them in 3 separate table columns instead of

HELP NEEDED: I have been searching for a solution to my problem extensively, both here on StackOverflow and through Google. However, none of the suggested posts or examples seem to address my specific issue. As a beginner, I am struggling to adapt the solu ...

Enhancing the Appearance of HTML Select Dropdowns in JavaFX 2.2 WebEngine

I am currently working on a project that is unable to be updated to Java 1.8 to support the latest JavaFX version. While this may or may not impact the issue I am facing, I have been exploring various solutions from the internet to customize the look and f ...

Click on the input field to give it focus before adding a class during the page

Alright, so here's the deal - I have an input field with the class .cf-se-input. I want this field to be focused using jQuery as soon as the document is ready. Additionally, if the field is focused either by the user clicking on it or through jQuery f ...