web-dev-qa-db-ja.com

反応でbase64画像を表示するにはどうすればよいですか？

画像をbase64形式でノードに保存しています。次に、それを受け取って変数に格納しています。タグに表示しますが、表示されません。正しい値がサーバーから受信されています。レンダリングでは、状態が設定されている場合、関数の条件はtrueです。trueであっても表示されていません。

getImage() {
    console.log('getImage');
    axios.get(`http://localhost:4000/image/get`).then((result) => {
        this.setState({ image: result })
        console.log(result);
    });
}

render(){
    {this.state.image ? <img src={this.state.image}></img>: ''}
}

サーバーに保存している正確なbase64文字列を取得しています。

<img src="[object Object]">

dOMでは、どこが間違っているのかわかりません

[〜＃〜]編集[〜＃〜]

router.route('/image/get').get((req, res) => {
    console.log('inside img get');
    Image.find((err, result) => {
        if (err) {
            res.json({ "error": true, "message": "error fetching data" });
        } else {
            // console.log(result);
            res.json(result);
        }
    })

});

モデル

const mongoose=require('mongoose');
const Schema=mongoose.Schema;
var ImageSchema=new Schema({
    imageName:{
        type:String
    },
    imageData:{
        type:String
    }

});

export default mongoose.model('Image', ImageSchema);
node.jsreactjsmongodbbase64
5
Krazy
const byteCharacters = atob(result);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);

let image = new Blob([byteArray], { type: 'image/jpeg' });

Blobを取得したら、それを次のようなデータURLに変換する必要があります。

let imageUrl = URL.createObjectURL(image);
this.setState({image: imageUrl});

これで、状態に保存されているこのURLを、次のような画像のソースとして使用できます。

<img src={this.state.image} />

お役に立てれば！！

0
Harshit Agarwal