Whenever I have an image displayed on my Nuxt page and then navigate away from it, the image breaks and I can't figure out why.
This is what my code looks like:
<img :src="baseUrl + 'storage/'+ front.featured_image" alt="post-title" />
And here is my script:
data: () => ({
frontpage: [],
baseUrl: process.env.BASE_URL
}),
async asyncData({ $axios }) {
const response = await $axios.get('/api/frontpage')
return { frontpage: response.data.posts }
},
I have a .env file with BASE_URL=http://localhost/ in it, and also this inside nuxt.config.js:
env:{
baseUrl: process.env.BASE_URL || 'http://localhost/'
}
My API, which is built using Laravel, loads from http://localhost/, but for some reason Nuxt keeps going back to localhost:3000 on page change.