Изображения, которые не отображаются в приложении React, развернутом в Heroku, но отвечают 200

Question

У меня есть простое приложение реагирования, развернутое на Heroku (с использованием пакета статической сборки https://github.com/heroku/heroku-buildpack-static), однако изображения не загружаются. Я знаю, что это должно быть связано с путем, так как он работает для менялокально, однако ничего, что я пробовал, работает.

Вот как выглядит каталог

build
  index.html
  bundle.js
node_modules
public
  images
    logo.png
    index.html
src
    components
        LeftSidebar
            index.js
static.json
webpack.config.js

Вот мой static.json файл:

{
  "root": "build",
  "routes": {
    "/**": "index.html"
  },
  "https_only": true
}

У меня естьустановите для изображения src (jsx в компоненте LeftSidebar) относительный путь от сборки к общедоступному каталогу. Относительный путь от папки сборки к общедоступной папке выглядит следующим образом:

"../public/images/logo.png"

Причина, по которой я это сделал, заключается в том, что я решил, что, поскольку единственная вещь, которая на самом деле запускается в браузере, это файл index.htmlкоторый загружает bundle.js, который вызывает <img />, этот относительный путь будет работать (пожалуйста, исправьте меня, если я ошибаюсь здесь)

Я также попытался установить путь так, чтобы он был относительномой конкретный компонент LeftSidebar -- index.js кизображение в общей папке:

.. / .. / .. / public / images / logo.png

Я также пытался

public / images / logo.png

и несколько других вариантов, все без удачи.

Я думаю, что, должно быть, я упускаю что-то более важное в том, какстатический веб-сервер (в данном случае Nginx) будет обслуживать статические ресурсы.Или, в конечном счете, Webpack в конечном итоге создает файл bundle.js.

Также довольно странно, что не возвращается код состояния 404, но изображение не загружается, и ответ на вкладке сети - не что иное, как белый экран.

Answer 1

При импорте изображений в React мы обычно полагаемся на Webpack для копирования соответствующих файлов, а не на ссылки на общедоступный каталог, например

src
    components
        MyComponent
            index.jsx
            image.png

В моем файле index.jsx я бы просто импортировал изображение так:

import myImage from './image.png';

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

См. Этот вопрос / ответ для более подробной информации о процессе: Как импортировать изображение (.svg, .png) в компонент React