sql >> Base de Datos >  >> RDS >> Mysql

¿Cómo mostrar la imagen de mysql blob en html usando Vuejs?

Lo que quieres es una url de datos . Deberá convertir la matriz de bytes a base64. No hay forma de usar los bytes sin formato. Quizás haga esto en una propiedad calculada, usando una de las matrices de bytes para funciones base64 .

Marcado

<img :src="dataUrl">

Comportamiento (¡no probado!)

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

Examine su conciencia. Esto realmente no es una buena idea :-) El envío de imágenes como una matriz de bytes codificados en JSON es algo que nunca había visto, y será aproximadamente, supongo, 10 veces más grande en el cable que la imagen binaria. Las imágenes en la base de datos son un antipatrón . Las imágenes en JSON funcionan, pero deben codificarse como cadenas base64 en JSON. Incluso entonces, reducen la legibilidad del JSON y pueden enterrar herramientas como Postman. Las URL de datos son mucho más lentas para cargar que las URL regulares. Incluso con imágenes en la base de datos, si controla su API, puede ganar mucho creando API de imágenes que devuelvan solo la matriz de bytes, con un tipo mime de aplicación/jpeg.