Как передать изображение из Express.js в React

Я пытаюсь передать изображение из моего общедоступного каталога на моем сервере node.js + express на клиентскую сторону, которая является Reacts (в частности, create-response-app).

У меня типичная файловая структура

-public
   -images
      -image.jpeg

На стороне клиента у меня есть тег изображения с таким относительным путем

<img src='/images/me.jpeg' alt = "" />

Мой app.js для экспресс выглядит так

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();

const contactRouter = require('./routes/contact');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(express.static(__dirname + "/public"));
app.use(express.static(path.join(__dirname, 'client/build')));

//route handlers

app.use('/contact', contactRouter);

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/client/build/index.html'));
});


module.exports = app;

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

const proxy = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(proxy('/images/*', { target: 'http://localhost:5000' }));
}

Я ценю помощь, ребята!

Есть ли на вашем сервере каталог сборки рядом с вашей общей папкой, например /dist?

Shawn Andrews 25.11.2018 08:05

Нет, его нет. Что конкретно будет делать папка сборки?

Scott Selke 25.11.2018 08:11

Не проблема. Теоретически, хотя ваш код правильный, и запрос изображения должен останавливаться на строке app.use(express.static(__dirname + "/public")); и возвращать изображение, если оно существует на /public/images/me.jpeg

Shawn Andrews 25.11.2018 08:16

Хм любопытно. Если бы я заглянул в инструменты chrome dev, должен ли я увидеть запрос к localhost:5000/public/images/me.jpeg из моего тега <img>?

Scott Selke 25.11.2018 08:20

Итак, я смог узнать, что мой тег img делает запрос на localhost: 3000 / public / images / me.jpeg. Так что по какой-то причине мой прокси не работает

Scott Selke 25.11.2018 08:32

Ах, я не знаком с прокси, но все остальное выглядит правильно

Shawn Andrews 25.11.2018 08:55
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
1 253
0

Другие вопросы по теме