Hoe mysql blob-afbeelding in html weergeven met Vuejs?

Wat je wilt is een data-url . U moet de byte-array converteren naar base64. Er is geen manier om de onbewerkte bytes te gebruiken. Doe dit misschien in een berekende eigenschap, met behulp van een van de bytearrays om base64-functies .

Mark-up

<img :src="dataUrl">

Gedrag (niet getest!)

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

Doorzoek je geweten. Dit is echt geen goed idee :-) Afbeeldingen verzenden als een JSON-gecodeerde byte-array is iets dat ik nog nooit heb gezien, en zal waarschijnlijk 10x groter zijn op de draad dan de binaire afbeelding. Afbeeldingen in de DB zijn een antipatroon . Afbeeldingen in JSON werken, maar ze moeten worden gecodeerd als base64-tekenreeksen in de JSON. Zelfs dan verminderen ze de leesbaarheid van de JSON en kunnen ze tools zoals Postman begraven. Gegevens-urls zijn veel langzamer te laden dan gewone url's. Zelfs met afbeeldingen in de database, als je je api beheert, kun je veel winnen door afbeeldings-api's te maken die alleen de byte-array retourneren, met een applicatie/jpeg-mime-type.