图像未显示在 heroku 部署的 React 应用程序上，但响应为 200

Question

我在 Heroku 上部署了一个简单的 React 应用程序（使用静态构建包 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（LeftSidebar 组件中的 jsx）设置为具有从构建到 public 目录的相对路径。从构建文件夹到 public 文件夹的相对路径如下所示：

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

我之所以这样做，是因为我认为由于浏览器中唯一真正运行的是加载 bundle.js 的 index.html 文件，这是调用 <img /> 这个相对路径会起作用。（这里说错了请指正）

我还尝试设置路径，使其与我的特定组件 LeftSidebar -- index.js 相对于 public 文件夹中的图像：

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

我也试过了

public/images/logo.png

和其他一些变体，都没有运气。

我认为我一定遗漏了一些关于静态 Web 服务器（在本例中为 Nginx）服务静态资产的方式的更重要的东西。或者 Webpack 最终创建 bundle.js 文件的方式。

也很奇怪，没有返回404状态码，但是图像不会加载，网络选项卡中的响应只是白屏。

Answer 1

将图像导入 React 时，我们通常依靠 Webpack 复制相应的文件，而不是必须引用 public 目录，例如

src
    components
        MyComponent
            index.jsx
            image.png

在我的 index.jsx 文件中，我只是像这样导入图像：

import myImage from './image.png';

最后，也是最重要的，你需要更新你的 Webpack 配置以包含你的图像加载器，如果还没有包含的话，比如 file-loader.

有关该过程的更多详细信息，请参阅此 question/answer：

图像未显示在 heroku 部署的 React 应用程序上，但响应为 200

Images not showing on heroku-deployed React app, but responding with 200

deployment

webserver

heroku

reactjs

webpack