Как отобразить изображение с <img>из Mongoose, используя интерфейс React

Question

Конечная цель: сделать так, чтобы пользователь загружал картинки (менее 16 Мб, поэтому не нужно беспокоиться о Grid FS), сохранял эту картинку в моей базе данных, которая находится в Mongodb через Mongoose, и отображал картинку на экране с помощью атрибута.

Для загрузки файлов я использую Multer и добавляю его в базу данных следующим образом:

newItem.picture.data = Buffer(fs.readFileSync(req.file.path), 'base64');
newItem.picture.contentType = 'image/png';

И, похоже, он успешно добавлен в mongodb.Выглядит примерно так: как выглядит изображение на mongodb

Я могу отправить запрос get из моего внешнего интерфейса и, когда я его утешаю, это то, что яполучаю: Данные после получения из базы данных .Вопрос теперь в том, как я могу добавить его к атрибуту и ​​показать изображение на экране.Спасибо!

Редактировать: вопрос был отмечен модераторами как слишком широкий.Справедливо, я не был слишком уверен, как подойти к нему.Поскольку я смог решить ее, вот как выглядит мой интерфейс.

componentDidMount() {
    const PATH = "http://localhost:8080/apii/items/getitems";
    axios.get(PATH)
    .then(res => {            
        let picture64Bit = res.data[0].data.data
        picture64Bit = new Buffer(x, 'binary').toString('base64');
        this.setState({picture: picture64Bit})
    })
    .catch(err => console.log(err))
}

Ключ здесь в том, что 1) res.data [0] .data.data равен этому случайномусписок номеров.Я полагаю, что конвертирую его обратно в base64, поэтому он выглядит точно так же, как на первом рисунке выше с mongodb.Затем отобразить его в виде атрибута img очень просто:

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

Answer 1

Есть пара библиотек, которые вы можете использовать, но я произвольно выберу Axios для демонстрации.Звучит хорошо, если изображения уже находятся в БД Mongo.

Ваша задача - передать фотографии с сервера клиенту, поэтому вам нужна функция, чтобы получить их по запросу.Вы также можете исследовать fetch или request.

Axios: https://www.npmjs.com/package/axios

В React, попробуйте что-то вроде этого

  async getPhotos() {
    const res = await Axios.get('/photos')
    console.log('RESPONSE', res)

    const photos = res.data
    console.log('IMAGES', photos)

    this.setState({ photos })
  }

Вот более полныйпример

import React, { Component } from 'react'
import Axios from 'axios'

class List extends Component {
  constructor(props) { // super props allows props to be available 
    super(props)       // inside the constructor
    this.state = {
      photos : [],     // Initialize empty list to assert existence as Array type
                       // and because we will retrieve a list of jpegs
      error: '',       // Initialize empty error display
    }
  }

  componentDidMount() {
    this.getPhotos()   // Do network calls in componentDidMount
  }

  async getPhotos() {
    try {
      const res = await Axios.get('/photos')
      console.log('RESPONSE', res)

      const photos = res.data
      console.log('IMAGES', photos)

      this.setState({ photos, error: '' })
    } catch (e) {
      this.setState({ error: `BRUTAL FAILURE: ${e}` })
    }
  }

  render() {
    if (error.length) {
      return (
        <div>{this.state.error}</div>
      )
    }
    if (!photos.length) {
      return (
        <div>No photos yet</div>
      )
    }
    // Assuming shape { id: 0, caption: 'Cats again', src: 'http://www.com/win.jpg' }
    // Make sure to include key prop when using map (for state management)
    return (
      <ul>
        {this.state.photos.map(photo => (
          <li key={photo.id} style={{ position: 'relative' }}>
            <span>{photo.caption}</span>
            <img src={photo.src}
            <div
              className="overlay"
              style={{
                position: 'absolute'
                width: '100%',
                height: '100%',
              }}
            />
          </li>
        ))}
      </ul>
    )
  }
}

Цитирование : В React.js я должен сделать мой начальный сетевой запрос в componentWillMount или componentDidMount?

Если вы хотитеПолучите еще одну фотографию после, вы должны постараться мыслить неизменно и заменить массив this.state.photos его дубликатом, а также новым изображением, помещенным в конец массива.Мы будем использовать оператор распространения для этого, чтобы сделать поверхностную копию существующего массива фотографий.Это позволит React различать два состояния и эффективно обновлять новую запись.

const res = await Axios.get('/photo?id=1337')
const photo = res.data

this.setState({
  photos: [...photos, photo]
})

Примечание : секретный трюк состоит в том, чтобы избежать выполнения this.state.photos.push(photo).Вы должны поставить недопустимый знак для установки состояния, подобного этому.

В React попытайтесь найти способ получить объект или массив.Как только вы запомнили это, бросьте его в состояние Компонента.По мере того, как вы переходите в Redux, вы иногда будете хранить предметы в магазине Redux.Это слишком сложно и не нужно описывать сейчас.Фотографии будут доступны, возможно, как this.props.photos через функцию подключения Redux.

В большинстве других случаев поле состояния Компонента является отличным местом для хранения чего-либо интересующего Компонента.

Вы можете представить его как держатель в верхней части Компонента.