2

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
Henry Oladeji
  • 47
  • 7
  • `process.env.BASE_URL` is the base URL of your nuxt app which is `http://localhost:3000` – bar5um Apr 09 '22 at 04:28
  • You can start by [reading this](https://stackoverflow.com/a/67705541/8816585). Where is your `featured_image` state defined. How is it broken (what do you see in the Vue devtools)? Do you use SSG or SSR? As suggested above, maybe try to rename the variable. Maybe try with a `fetch()` hook. You're not using `a` tags to move I hope. – kissu Apr 09 '22 at 07:09

1 Answers1

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!

kissu
  • 40,416
  • 14
  • 65
  • 133