I have a Vue application and I make requests using axios to a back end. On some pages the base url as specified in the main.js file is added to image urls but on some pages the base url is not added. It’s got nothing to do with the backend as the backend is returning the same data no matter what. So on some pages I have to manually add the base URL which is a problem. Why would axios add the base URL to some requests and others not?

As an example here are two functions that fetch data from a backend:

With this function the base URL is added

const getUserPosts = async () => {
  ready.value = false;
  try {
    const response = await axios.get(`/api/v1/posts/user/${account.id}/`);
    if (response.status == 200) {
      userPosts.value = response.data;
      ready.value = true;
    }
  } catch (error) {
    if (error) {
      console.error(error);
    }
  }
};

here is that data:

images: Array(3) [ {…}, {…}, {…} ]
​​​​​
0: Object { id: 32, image: "/storage/posts/post_22/images/CijVJgTl_400x400.png" }
​​​​​
1: Object { id: 33, image: "/storage/posts/post_22/images/2006030f6a214f3f7b546843e3d9e042.jpg" }
​​​​​
2: Object { id: 34, image: "/storage/posts/post_22/images/2498932a-fbf7-4fbf-a020-26843998a92c-original.png" }
​​​​​
length: 3

With this function the base URL is not added

const getPostsByType = (data, type) => {
  const typeObject = data.find((item) => item.type === type);
  return typeObject ? typeObject.posts : [];
};

const getConnectionPosts = async () => {
  ready.value = false;
  try {
    const response = await axios.get(`/api/v1/posts/user/${account.id}/connections/`);
    if (response.status == 200) {
      friendsPosts.value = getPostsByType(response.data, "friends");
      familyPosts.value = getPostsByType(response.data, "family");
      colleaguePosts.value = getPostsByType(response.data, "colleague");
      ready.value = true;
    }
  } catch (error) {
    if (error) {
      console.error(error);
    }
  }
};

here is that data

images: Array(3) [ {…}, {…}, {…} ]
​​​
0: Object { id: 29, image: "http://localhost:8000/storage/posts/post_16/images/167236-004-AE764A76.jpg" }
​​​
1: Object { id: 30, image: "http://localhost:8000/storage/posts/post_16/images/538376_10151400786633552_91901036_n.jpg" }
​​​
2: Object { id: 31, image: "http://localhost:8000/storage/posts/post_16/images/1898031_10152302839588708_776652840_n.jpg" }
​​​
length: 3

I just console logging the response.data so there is no manipulation of data that comes from the back end.

Any help is appreciated