Was Sie wollen, ist eine Daten-URL . Sie müssen das Byte-Array in Base64 konvertieren. Es gibt keine Möglichkeit, die rohen Bytes zu verwenden. Vielleicht tun Sie dies in einer berechneten Eigenschaft, indem Sie eines der Byte-Arrays verwenden base64-Funktionen .
Auszeichnung
<img :src="dataUrl">
Verhalten (ungetestet!)
computed : {
dataUrl(){
return 'data:image/jpeg;base64,' + btoa(
new Uint8Array(this.info.image)
.reduce((data, byte) => data + String.fromCharCode(byte), '')
);
}
}
Suche dein Gewissen. Das ist wirklich keine gute Idee :-) Das Senden von Bildern als JSON-codiertes Byte-Array ist etwas, das ich noch nie gesehen habe und das schätzungsweise 10-mal größer auf der Leitung sein wird als das binäre Bild. Bilder in der Datenbank sind ein Antimuster . Bilder in JSON funktionieren, aber sie sollten als base64-Strings in JSON codiert werden. Selbst dann verringern sie die Lesbarkeit des JSON und können Tools wie Postman begraben. Daten-URLs sind viel langsamer zu laden als normale URLs. Selbst mit Bildern in der Datenbank können Sie, wenn Sie Ihre API steuern, viel gewinnen, indem Sie Bild-APIs erstellen, die nur das Byte-Array mit einem Anwendungs-/JPEG-Mime-Typ zurückgeben.
