Tengo un componente Vuejs que contiene una etiqueta img. Puedo renderizar la imagen sin problemas si codifico el src de esta manera.

 <template> <div> <!-- <img class="rotate logo" alt="Vue logo" src="@/assets/abstractwave.png"/> --> </div> </template> <script> export default { name: "RotatingImage", props: { filename: String }, } </script>

No puedo renderizar la imagen si inserto bind the src como accesorio. De la siguiente manera... ¿Por qué es esto? ¿Qué debo cambiar para renderizar la imagen usando un accesorio?

 <template> <div> <img class = "rotate" alt="Vue logo" :src="`@/assets/${filename}`" /> </div> </template> <script> export default { name: "RotatingImage", props: { filename: String }, } </script>

Tras la inspección en el navegador, veo que la ruta src es correcta, pero la imagen no se muestra.