In my NuxtJS project I have a component that recieves an image path as a prop. I tried passing it directly to :src="imageAddress" but it neither resolve nor throws an error. Then I tried to use this path inside require() to resolve it properly. But I get this Nuxt error: Cannot find module '~/assets/icons/crown.png'. The path is correct and I tested that by placing an img element directly in index.vue. Do you have any idea why this happens?
This is how my code is structured:
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>