I have been trying to set background-image to divs inside Template iteration in LWC component. But when I am trying to locate divs using this.template.queryLocatorAll, I am not getting any Divs. Is it because they are inside Template iteration. If so then how can i locate these elements and set background images to these divs?

Here is my HTML code:

 <div class="slideshow-container">
            <template for:each={result} for:item="res">
            <div class="mySlides fade"  key={res.id} >
                <div data-id= {res.Id}  class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
      

             <div >
                {res.Id}
                {res.Comments__c}
            </div>
        
         
        
     </div>
    </div>

and here is my JS code:

 const divs = this.template.querySelectorAll('div');
    for(var i=0;i<this.result.length;i++){
        const  target = this.template.querySelectorAll('[data-id='+this.result[i].id+']');
       console.log('target'+target.length);
    }
    if (divs) {
        console.log('divs'+divs.length);
        for(var i=0;i<divs.length;i++){
        this.result.map((res) => {

            const div = Object.values(divs).filter(res => (res.getAttribute('data-id') === res.Id))[i];
            div.style.backgroundImage = 'url()';
        });
    }
 
    } 

Any help will be appericated.

I have been trying to set background-image to divs inside Template iteration in LWC component. But when I am trying to locate divs using this.template.queryLocatorAll, I am not getting any Divs. Is it because they are inside Template iteration. If so then how can I locate these elements and set background images to these divs?

Here is my HTML code:

<div class="slideshow-container">
    <template for:each="{result}" for:item="res">
        <div class="mySlides fade" key="{res.id}">
            <div data-id="{res.Id}" class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <div>
                    {res.Id} {res.Comments__c}
                </div>
            </div>
        </div>
    </template>
</div>

and here is my JS code:

const divs = this.template.querySelectorAll('div');
for (var i = 0; i < this.result.length; i++) {
  const target = this.template.querySelectorAll('[data-id=' + this.result[i].id + ']');
  console.log('target' + target.length);
}
if (divs) {
  console.log('divs' + divs.length);
  for (var i = 0; i < divs.length; i++) {
    this.result.map((res) => {

      const div = Object.values(divs).filter(res => (res.getAttribute('data-id') === res.Id))[i];
      div.style.backgroundImage = 'url()';
    });
  }
}

Any help will be appreciated.