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

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

1 个答案: