I have image displayed on my Nuxt page but anytime I navigate away from it back the image breaks and I do not know why.
I have this in my code
<img :src="baseUrl + 'storage/'+ front.featured_image" alt="post-title" />
and 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 and I have the following inside it BASE_URL=http://localhost/ and I also have the following inside nuxt.config.js
env:{
baseUrl: process.env.BASE_URL || 'http://localhost/'
}
My API is built using laravel and it is loading from http://localhost/ but Nuxt keeps going back to localhost:3000 on page change.
You can check my previous answer here: https://stackoverflow.com/a/67705541/8816585
This may help
export default {
publicRuntimeConfig: {
baseUrl: process.env.BASE_URL,
},
}
Otherwise, this configuration of Axios may also help!