Nuxt image keeps breaking on page change

Question

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.

Answer 1

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!