Как отобразить изображение из mongodb с помощью Reactjs

Question

Я сохранил свое изображение в Mongodb так:

 "img": {
    "data": "<Binary Data>",
    "contentType": "image/png"
}

Я пытаюсь отобразить его в ReactJS, используя этот код:

..{products.map(product => {
   <img src= {product.img} />

Но ничего не отображается. Любая идея, пожалуйста, чтобы исправить это.

Answer 1

Вы пытаетесь отобразить ваше изображение в атрибуте src с двоичными данными, когда оно ожидает URL.

Если это двоичные данные, вам нужно воспроизвести их таким образом и сообщить вашему компоненту, что вы передаете двоичные данные

<img src={`data:image/png;base64,${product.img.data}`} />