Estou migrando de Vue2 para Vue3 + TS, muito diferente mas estou conseguindo avançar, mas me deparei com um problema que não consigo resolver. Tenho uma lista que possui um icon que ao clicar ele exibe uma modal que mostra uma imagem que é fornecida pelo backend. Pela parte do backend tudo funciona bem, pois tenho a mesma aplicação rodando em Vue2 e funciona perfeito, tambem realizo testes usando postman e a imagem é exibida corretamente, mas quando uso o projeto em vue 3 a imagem não é renderizada e aparece crashada.
Essa é a classe do Axios que faz a requisição que é realizada corretamente, devolvendo tudo certinho
import axios, { AxiosInstance } from "axios";
import { BASE_URL } from "./url";
import { store } from "@/store";
const httpClient: AxiosInstance = axios.create({
baseURL: BASE_URL,
headers: {
Accept: "*/*",
"Content-type": "image/jpeg",
responseType: "arrayBuffer",
},
});
httpClient.interceptors.request.use(
function (config) {
const token = store.getters.getToken;
if (token) {
config.headers.Authorization = "Bearer " + token;
}
return config;
},
function (error) {
return Promise.reject(error);
}
);
export default httpClient;
Esse é a parte do html
<template>
<div class="modal" :class="{ 'is-active': show }">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Display do Produto</p>
<button class="delete" aria-label="close" @click="close()"></button>
</header>
<section class="modal-card-body">
<figure>
<img :src="figura == null ? require('/static/images/default.png') : figura" />
</figure>
</section>
<footer class="modal-card-foot">
<button class="button is-success" @click="loadPicture()">Load</button>
<button class="button" @click="close()">Close</button>
</footer>
</div>
</div>
</template>
Esse é o metodo em TS que carrega a image octet-stream base64
data() {
return {
figura: null as string | ArrayBuffer | null,
};
},
methods: {
loadPicture() {
if (this.editing.id != 0) { //teste para verificar se o produto existe
const filename = this.editing.id + ".jpg";
this.store.dispatch(DOWNLOAD_FILE, filename).then((file) => {
const blob = new Blob([file]);
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = (e) => {
if (e.target != null) {
this.figura = e.target.result;
}
};
});
}
},
}
No vue 2 eu usava boostrapvue com a tag b-img, na versão do vue 3 eu uso o Bulma com a tag img normal, acho que não deveria apresentar diferença quanto a isso, mas já tentei de tudo e não consigo fazer com que a imagem seja carregada.
)
)