Как показать base64 изображение в реакции?

Question

Я храню изображение в формате base64 на узле. Затем я получаю его и сохраняю в переменной. и показать его в теге, но он не отображается. Правильные значения поступают с сервера. При рендеринге условие функции имеет значение true, если состояние установлено. Even, если его значение 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]">

в ДОМЕ. Я не знаю, где я ошибаюсь

EDIT

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);

Answer 1

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} />

Надеюсь, это поможет !!

Answer 2

Удалось ли добавить тип кодировки в атрибут src вместе со значением в кодировке base64?

render(){
    {this.state.image ? <img src={`data:image/png;base64,${this.state.image}`}/>: ''}
}