Jak zobrazit obrázek mysql blob v html pomocí Vuejs?

Co chcete, je datová adresa URL . Budete muset převést bajtové pole na base64. Neexistuje žádný způsob, jak použít nezpracované bajty. Možná to uděláte ve vypočítané vlastnosti pomocí jednoho z bajtového pole funkce base64 .

Značky

<img :src="dataUrl">

Chování (netestováno!)

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

Zpytujte si svědomí. To opravdu není dobrý nápad :-) Odesílání obrázků jako pole bajtů zakódovaných ve formátu JSON je něco co jsem nikdy neviděl a odhaduji, že bude asi 10x větší na drátě než binární obrázek. Obrázky v DB jsou antivzorem . Obrázky v JSON fungují, ale měly by být kódovány jako řetězce base64 v JSON. I tak snižují čitelnost JSON a mohou pohřbít nástroje jako Postman. Datové adresy URL jsou mnohem pomalejší načíst než běžné adresy URL. I s obrázky v DB, pokud ovládáte své rozhraní API, můžete hodně získat tím, že vytvoříte rozhraní obrázku, které vrací pouze pole bajtů, s typem mime application/jpeg.