En mi proyecto NuxtJS, tengo un componente que recibe una ruta de imagen como accesorio. Intenté pasarlo directamente a :src="imageAddress" pero no se resuelve ni arroja un error. Luego traté de usar esta ruta dentro de require() para resolverlo correctamente. Pero recibo este error de Nuxt: No se puede encontrar el módulo '~/assets/icons/crown.png'. La ruta es correcta y la probé colocando un elemento img directamente en index.vue . ¿Tienes alguna idea de por qué sucede esto?
Así es como mi código está estructurado:
pages/index.vue <template> <ChildComponent image-address="~/assets/icons/crown.png" /> </template> ___________________________________________________________________ components/ChildComponent.vue <template> <img v-if="imageAddress.length" :src="require(imageAddress)"> </template> <script> export default { name: 'ChildComponent', props: { imageAddress: { type: String, required: true, default: '' } } } </script>Puedes intentar hacer un método en ChildComponent:
getUrl (img) { return require(`~/assets/icons/${img}.png`); }luego en la plantilla:
<img :src="getUrl(imageAddress)" alt="" />