How to bind something in img src from onMounted

Question

I have a method on onMounted() that calls an element from my Firebase collection and it works perfectly fine like this

setup () {
const profile = reactive({
  name: "",
  year: null, 
});
 
onMounted(async () => {
  const anime = await getAnime(userId.value);
  profile.name = anime.name;
  profile.year = anime.year;  
});
  
return { profile }
}

Now when I get profile.name in template it works perfectly but when I try to bind it to img, it doesn't work and says "Uncaught (in promise) Error: Cannot find module './.jpg' "

<template> 
<div> 
   {{profile.name}} - {{profile.year}}
   <img :src="require('@/assets/covers/'+profile.name+'.jpg')" alt="" />  
</div>
</template>

I have a folder (covers) with images for each anime that corresponds to their name so it should be able to find them there

Say for my "Naruto" anime, I get the name and year to show in template but can't bind it to to my link in img src