Как отобразить в React изображения, полученные с сервера Express?

Question

Я просто немного запутался, как правильно обслуживать ресурсы из исходной папки.

Соответствующий серверный код (клиент отправляет запрос / images, сервер отправляет обратно имена файлов):

const images = './static/images/';
app.use(express.static('static/images'))

app.get('/images', (req, res) => {
    res.setHeader('Content-Type', 'application/json');
    fs.readdir(images, (err, files) => {
        res.send(files);
      });
});

Моя структура каталогов выглядит следующим образом:

public
   index.html
server (houses Node/Express code)
   index.js
src (houses React code)
   App.js
static
   images
      image1, image2, image4, image4

Если я пытаюсь отобразить изображение в React (state.currImage является одним из 4 имен файлов):

<img alt="scan" src={ require(this.state.currImage)}

Я получаю сообщение об ошибке «Необработанный отказ (ошибка): не удается найти»модуль './static/images/file1.jpg'"

Answer 1

Похоже, вы могли бы удалить require из загрузки изображения, учитывая, что это путь к изображению, а не путь к модулю javascript.

<img alt="scan" src={this.state.currImage}

Возможно, вам потребуется обновить URLиз этих изображений, чтобы указать на URL-адрес сервера. В данный момент строка ./static/images/file1.jpg, но может потребоваться /images/file1.jpg.