图片未显示在 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/images/logo.png"

我这样做的原因是因为我认为浏览器中实际运行的唯一内容是加载 bundle.js 的 index.html 文件，该文件正在调用 <img /> 这个相对路径会工作。 （如有错误请指正）

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

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

我也试过了

public/images/logo.png

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

我认为我一定遗漏了一些更重要的东西，即静态 Web 服务器（在本例中为 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。

有关该过程的更多详细信息，请参阅此问题/答案：How to import image (.svg, .png ) in a React Component