Загрузка изображений в reactjs с использованием nodejs - PullRequest
Новая
       55

Загрузка изображений в reactjs с использованием nodejs

0 голосов
/ 06 августа 2020

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

<Carousel autoplay>
            {props.images.map((image, index) => (
                <div key={index}>
                    <img style={{ width: '100%', maxHeight: '150px' }}
                        src={`http://localhost:5000/${image}`} alt="productImage" />
                </div>
            ))}
        </Carousel>
    </div>

Но я получаю эту ошибку: ошибка

Изображения хранятся в базе данных: 

{
          "images": [
            "uploads\\1596557942509_discount.png"
          ],
          "categories": 3,
          "_id": "5f298a8f205d0e109c896979",
          "productname": "Justchecking",
          "price": "444",
          "shopadress": "Checking",
          "contactdetails": "9999999",
          "createdAt": "2020-08-04T16:19:27.168Z",
          "updatedAt": "2020-08-04T16:19:27.168Z",
          "__v": 0
        },

Ответы [ 4 ]

0 голосов
/ 07 августа 2020

Я не понимаю, как хранится ваше изображение? Сохраняется ли только имя, и вы сохраняете его на своем сервере?
Возможно, попробуйте Multer и Sharp, чтобы преобразовать изображение в буфер, а затем получить его. 

<img src={bufferImage!=''?`data:image/jpeg;base64,${bufferImage}`:"https://reactbootstrap.netlify.app/logo.svg"} />

пользователь multer и sharp на сервере. так что, возможно, вместо сохранения uploads\\1596557942509_discount.png было бы лучше иметь что-то вроде
{ uploads\\1596557942509_discount.png : daskdas... }

0 голосов
/ 06 августа 2020

Я пробовал ваш код в редакторе, и формируемые URL-адреса отображаются в выводе. Пожалуйста, попробуйте открыть изображение в браузере, и если это не сработает, исправьте путь и попробуйте.

Возникает ошибка, потому что ваш путь к изображению неверен. 1005 * Вывод ваших изображений: 

"http://localhost:5000/uploads\1596557942509_discount.png"
"http://localhost:5000/uploads\1596557942509_discount.png"
0 голосов
/ 06 августа 2020

Думаю, вы используете Webpack для сборки. Webpack должен «требовать» динамические пути для источника изображения из-за его внутренних потоков управления модулями. Здесь - хороший пример подобной реализации. И я думаю, что , это и , это поможет вам приблизиться к root проблемы. Следует отметить еще один момент. Использование индекса массива в качестве «ключа» для дочерних компонентов является анти-шаблоном, как объяснено здесь . Вы можете повторно использовать идентификаторы компонентов для ключей.

0 голосов
/ 06 августа 2020

, если вы используете папку на Node.js бэкэнде, вы должны настроить службу c

Если настроена служба c, проверьте, есть ли ссылка к статистике c верен.

Также проверьте правильность ссылок в массиве изображений (особенно две обратные косые черты)

Наконец, ошибка сообщает, что изображения не найдены, поэтому, прежде чем вставлять его для реакции, попробуйте вставить абсолютный URL-адрес изображения в браузер и проверьте его. Если вы исправите проблемы, упомянутые выше, все должно работать

...