Mysql
 sql >> Base de données >  >> RDS >> Mysql

Comment afficher l'image mysql blob en html en utilisant Vuejs ?

Ce que vous voulez, c'est une URL de données . Vous devrez convertir le tableau d'octets en base64. Il n'y a aucun moyen d'utiliser les octets bruts. Faites-le peut-être dans une propriété calculée, en utilisant l'un des tableaux d'octets pour fonctions base64 .

Marquage

<img :src="dataUrl">

Comportement (non testé !)

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

Sondez votre conscience. Ce n'est vraiment pas une bonne idée :-) Envoyer des images sous forme de tableau d'octets encodé JSON est quelque chose que je n'ai jamais vu, et sera environ, devinez, 10 fois plus grand sur le fil que l'image binaire. Les images dans la base de données sont un antimodèle . Les images dans JSON fonctionnent, mais elles doivent être encodées sous forme de chaînes base64 dans le JSON. Même dans ce cas, ils réduisent la lisibilité du JSON et peuvent enterrer des outils comme Postman. Les URL de données sont beaucoup plus lentes à charger que les URL normales. Même avec des images dans la base de données, si vous contrôlez votre API, vous pouvez gagner beaucoup en créant des API d'image qui ne renvoient que le tableau d'octets, avec un type mime application/jpeg.