Mysql
 sql >> Database >  >> RDS >> Mysql

Come visualizzare l'immagine blob mysql in html usando Vuejs?

Quello che vuoi è un URL di dati . Dovrai convertire l'array di byte in base64. Non c'è modo di usare i byte grezzi. Forse farlo in una proprietà calcolata, usando uno degli array di byte per funzioni base64 .

Marca

<img :src="dataUrl">

Comportamento (non testato!)

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

Cerca nella tua coscienza. Questa non è davvero una buona idea :-) L'invio di immagini come array di byte con codifica JSON è qualcosa che non ho mai visto e sarà circa 10 volte più grande sul cavo rispetto all'immagine binaria. Le immagini nel DB sono un antipattern . Le immagini in JSON funzionano, ma devono essere codificate come stringhe base64 in JSON. Anche in questo caso, riducono la leggibilità del JSON e possono seppellire strumenti come Postman. Gli URL dei dati sono molto più lenti da caricare rispetto ai normali URL. Anche con le immagini nel DB, se controlli la tua API, puoi guadagnare molto creando API di immagini che restituiscono solo l'array di byte, con un tipo application/jpeg mime.