Hvordan viser man mysql blob-billede i html ved hjælp af Vuejs?

Det, du ønsker, er en data-url . Du skal konvertere byte-arrayet til base64. Der er ingen måde at bruge de rå bytes på. Gør dette måske i en beregnet egenskab ved at bruge en af ​​byte-arrayet til at base64-funktioner .

Markup

<img :src="dataUrl">

Adfærd (utestet!)

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

Søg din samvittighed. Det er virkelig ikke en god idé :-) At sende billeder som et JSON-kodet byte-array er noget Jeg har aldrig set og vil gætte omkring 10 gange større på ledningen end det binære billede. Billeder i DB er et antimønster . Billeder i JSON virker, men de skal kodes som base64-strenge i JSON. Selv da reducerer de læsbarheden af ​​JSON og kan begrave værktøjer som Postman. Datawebadresser er meget langsommere at indlæse end almindelige webadresser. Selv med billeder i DB, hvis du styrer dit API, kan du vinde meget ved at lave billed-API'er, der kun returnerer byte-arrayet, med en applikation/jpeg-mime-type.