How to load an image src url into Quasar/Vuejs

Question

How do I load an image src template? I tried it this way

<img :src="$axios.get(`/uploader/hotels/${hotel.photo}`)"/>

but the result is a [object Promise] with strange return:

http://localhost:8080/[object Promise]

How do I remove baseUrl from the quasar to show only the api url? What is missing?

I would like to click directly on the tag src of img without having to use the methods. For so I could call the Aces that way on every page that was necessary.

Answer 1

Whereas you are using the cli.vuejs.org to generate your project and build, I suggest using environment variable files, .env

Mimics the use of Node environment variables.

Then you create your files .env for its environments (development, homologation and production) with the variables:

NODE_ENV=development
VUA_APP_API_BASE_URL=http://localhost:8080/api

VUE_APP_ is the mandatory prefix for variables to be injected into your app

And then in your code just use process.env.VUE_APP_API_BASE_URL

I no longer know if it is possible to use the process.env.VUE_APP_X in expressions in the <template>, but I suggest using computed properties in its components or even creating a component just to abstract it.

<template>
  <img :src="src" />
</template>
<script>
export default {
  name: 'Image',
  props: ['path'],
  computed: {
    src({ path }) {
      return `${process.env.VUE_APP_API_BASE_URL}/${path}`;
    }
  }
}
</script>

And use the component:

<Image :path="`/uploader/hotels/${hotel.photo}`"/>

And in the place where you set the base url of Axios, replace by process.env.VUE_APP_API_BASE_URL.

Answer 2

I was able to find a solution, Vuex itself has a global variable to access the url inside the plugin Axios:

import axios from 'axios';
axios.defaults.baseURL = 'http://serverbackend:8765';

export default ({ Vue }) => {
  Vue.prototype.$axios = axios;
};

Soon the call in the url was:

<img :src="`${$axios.defaults.baseURL}/uploader/hotels/${hotel.photo}`"/>

Problem solved :)