Can't change the src of a image with JavaScript

Im triying to change the source of a image with a js function but it seems to not work, the function executes on a mounted() of Framework7

This is what i have right now

HTML:

<div>
 <span> <img id="star_1" class="star" src="../assets/empty_star.png"> </span>
 <span> <img id="star_2" class="star" src="../assets/empty_star.png"> </span>
 <span> <img id="star_3" class="star" src="../assets/empty_star.png"> </span>
 <span> <img id="star_4" class="star" src="../assets/empty_star.png"> </span>
 <span> <img id="star_5" class="star" src="../assets/empty_star.png"> </span>
</div>

JS:

setStars(){

 var full_star = '../assets/full_star.svg';

 document.getElementById('star_1').src = full_star;
 document.getElementById('star_2').src = full_star;
 document.getElementById('star_3').src = full_star;
 document.getElementById('star_4').src = full_star;                       
 document.getElementById('star_5').src = full_star;
}

This keeps me the empty stars and i wanna change them depending of a rating, how can i fix it?

I also tryed to get the document.getElementById in var but still does not work

document.querySelectorAll('.star')
  .forEach(el => el.src = '/assets/full_star.svg'');