0

Como eu carrego um axios no template de image src? Eu tentei dessa forma

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

mas o resultado é um [object Promise] com retorno estranho:

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

Como removo o baseUrl do quasar para mostrar somente a url da api? O que esta faltando?

Eu gostaria de carregar diretamente na tag src de img sem precisar utilizar o methods. Pois assim eu poderia chamar o axios dessa forma em todas as páginas que fosse necessário.

2 Respostas 2

0

Considerando que você esta utilizando o cli.vuejs.org para gerar seu projeto e fazer o build, eu sugiro usar arquivos de variáveis de ambiente, .env

Imita a utilização de variáveis de ambiente do node.

Então você cria seus arquivos .env para seus ambientes(desenvolvimento, homologação e produção) com as variáveis:

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

VUE_APP_ é o prefixo obrigatório para as variáveis serem injetadas no seu app

E ai no seu código é só utilizar process.env.VUE_APP_API_BASE_URL

Ai ja não sei se é possível utilizar o process.env.VUE_APP_X em expressões no <template>, porém sugiro utilizar computed properties em seus componentes ou até criar um componente só para abstrair isso.

<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>

E usa o componente:

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

E no lugar onde você define o base url do axios, substitui por process.env.VUE_APP_API_BASE_URL.

6
  • Testei a primeira opção e não funciona em template como foi dito. Testei a segunda e a página fica travada. O principal motivo de eu querer usar dessa forma é porque no axios, já esta definido a url do server e só bastava concatenar com o local correspondente. Caso o sistema mude de servidor, eu mudaria em um só lugar. Acho que criar um componente só pra isso seria muito burocrático. Será se tem como eu definir uma variável do tipo string global em um local no quasar framework só pra acessar o endereço do server em qualquer lugar do sistema? 20/11/2020 às 14:58
  • Calma, acho que agora eu entendi... Você queria usar somente a url ja definida no axios como default.baseUrl para concatenar a url que colocou no src? Ou vc quer chamar um serviço que uma url e finalmente usar a url retornada do serviço como src da imagem?
    – Giovane
    20/11/2020 às 15:07
  • Somente a url resolve o problema. Estava pesquisando se tinha um local pra por essas variáveis assim eu poderia utilizar também no axios. 20/11/2020 às 15:56
  • Certo, então você só precisa de usar a url... tranquilo, vou editar minha resposta
    – Giovane
    20/11/2020 às 16:50
  • A solução proposta é interessante! Pois usou como base o .env que pode ser trocado facilmente para cada ambiente! Porem, achei estranho ter que refazer a tag img como component. Não seria mais interessante por o process.env.VUE_APP_API_BASE_URL direto no axios? 21/11/2020 às 18:23
-1

Consegui achar uma solução, o próprio Vuex tem uma variável global para acesso a url dentro do plugin axios:

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

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

Logo a chamada na url ficou:

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

Problema resolvido :)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .