No he tocado Vue por un tiempo, ahora estoy creando un componente <HeroImage> en Vue y Vuetify que toma atributos src , coloca la imagen y la combina de cierta manera con la ranura y otros accesorios.

Por lo general, la respuesta es envolver la cadena src en una request() . Pero ahora arroja este mensaje en tiempo de compilación:

Critical dependency: the request of a dependency is an expression

Esto es lo que estoy tratando de hacer:

 <!-- src/views/Home.vue --> <template> <!-- This does not work --> <HeroImage src="@/assets/hero-image.png" /> <!-- As comparison, this somehow works --> <img :src="require('@/assets/hero-image.png')" /> </template> <script> import HeroImage from "@/components/HeroImage" export default { components: { HeroImage } } </script>

 <!-- src/components/HeroImage.vue --> <template> <img alt="Hero Image" class="align-center justify-center" :src="require(src)" /> </template> <script> export default { name: "HeroImage", props: { src: String } } </script>