时间戳

首页 > 解决方案 > 图片未显示在 heroku 部署的 React 应用程序上，但响应为 200

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

问题描述

我在 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（LeftSidebar 组件中的 jsx）设置为具有从构建到公共目录的相对路径。从构建文件夹到公用文件夹的相对路径如下：

“../public/images/logo.png”

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

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

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

我也试过

公共/图像/logo.png

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

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

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

标签： reactjsherokuwebpackdeploymentwebserver

解决方案

将图像导入 React 时，我们通常依靠 Webpack 来复制适当的文件，而不是必须引用公共目录，例如

src
    components
        MyComponent
            index.jsx
            image.png

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

import myImage from './image.png';

最后，也是最重要的，你需要更新你的 Webpack 配置以包含一个加载器，如果还没有包含一个加载器，例如file-loader。

有关该过程的更多详细信息，请参阅此问题/答案：如何在 React 组件中导入图像 (.svg, .png)

推荐阅读