Hur visar man mysql blob-bild i html med Vuejs?

Det du vill ha är en data-url . Du måste konvertera byte-arrayen till base64. Det finns inget sätt att använda de råa byten. Kanske gör detta i en beräknad egenskap, med en av byte-arrayen för att base64-funktioner .

Markering

<img :src="dataUrl">

Beteende (otestat!)

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

Sök ditt samvete. Det här är verkligen ingen bra idé :-) Att skicka bilder som en JSON-kodad byte-array är något Jag har aldrig sett, och kommer, gissningsvis, att vara 10 gånger större på tråden än den binära bilden. Bilder i databasen är ett antimönster . Bilder i JSON fungerar, men de bör kodas som base64-strängar i JSON. Även då minskar de läsbarheten för JSON och kan begrava verktyg som Postman. Datawebbadresser är mycket långsammare att ladda än vanliga webbadresser. Även med bilder i DB:n, om du kontrollerar ditt api, kan du vinna mycket genom att göra bild-API som bara returnerar byte-arrayen, med en applikation/jpeg-mimetyp.