Question

我想加载放置在我的反应存储库中的 public 目录下的图像。如果将所有组件放在 App.js 中（默认路径在 index.html 中设置），它将自动加载。但是，我将应用程序提取到由父组件 App.js 呈现的不同组件。这里的子组件是 rendermovies.js 。如何修改 rendermovies.js 中的路径？

这是我在react项目下的文件架构：

public
├── favicon.ico
├── index.html
└── manifest.json

src
├── App.css
├── App.js
├── img
│   └── image.jpg
├── index.css
├── index.js
├── rendermovies.js

我尝试了 src 和 public 之间的相对链接，以将子组件定向到 img 目录，但是它不起作用。我通过将 img 目录放在 src 下解决了加载问题，将其导入并使用<Card.Img src={} ./>

import defaultposter from './img/image.jpg';

在render中，我使用以下内容加载图像

<Card.Img variant="top" style={{height: 500}} src={ defaultposter } />

或使用这种方式

<Card.Img variant="top" style={{height: 500}} src={require(./img/image.jpg)} />

无论哪种方式，他们都需要 src 目录下的 img 目录

但是建议我将应用程序的图片和其他媒体放在 public 下，而不要放在 src 下。无论如何，我都想知道如何做到这一点。任何帮助或想法将不胜感激！

Answer 1

如果您想将图像放置在公用文件夹下，请首先下载file-loader https://www.npmjs.com/package/file-loader并在webpack.config.js中进行配置，如下所示，以将图像从公用文件夹中获取到src文件夹中的子组件，您可以使用以下路径../public/img/来加载图像，将其名称放在array或状态中，然后将其传递给子组件，然后您可以使用最常见的方法map()对这些图像名称中的每一个进行迭代，然后像这样${imageName.jpg}那样通过字符串插值对其进行引用。

 // webpack.config.js
 module: {
        rules: [
          {
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: 'file-loader',
                options: {}
            }]
          },
        ],
      },
    };


 <Card.Img variant="top" style={{height: 500}} src={require(`../public/img/${imageName.jpg}`)} />

如何从子组件的公共目录中加载图像？

1 个答案: