Mysql
 sql >> Base de Dados >  >> RDS >> Mysql

Como exibir a imagem do mysql blob em html usando o Vuejs?


O que você quer é um url de dados . Você precisará converter a matriz de bytes para base64. Não há como usar os bytes brutos. Talvez faça isso em uma propriedade computada, usando uma das matrizes de bytes para funções base64 .

Marcação
<img :src="dataUrl">

Comportamento (não testado!)
computed : {
    dataUrl(){
        return 'data:image/jpeg;base64,' + btoa(
            new Uint8Array(this.info.image)
            .reduce((data, byte) => data + String.fromCharCode(byte), '')
        );
    }
}

Procure sua consciência. Esta não é realmente uma boa ideia :-) O envio de imagens como uma matriz de bytes codificada em JSON é algo que eu nunca vi e será cerca de 10 vezes maior no fio do que a imagem binária. As ​​imagens no banco de dados são um antipadrão . Imagens em JSON funcionam, mas devem ser codificadas como strings base64 no JSON. Mesmo assim, eles reduzem a legibilidade do JSON e podem enterrar ferramentas como o Postman. Os URLs de dados são muito mais lentos para carregar do que urls normais. Mesmo com imagens no banco de dados, se você controlar sua api, pode ganhar muito fazendo apis de imagem que retornam apenas o array de bytes, com um tipo mime application/jpeg.