javascript - 无法使用react@16.4.2组件和webpack加载静态图像

Question

我正在尝试在名为 Top.js 的组件中加载静态图像，因此我在 Top.js 中导入了如下所示的图像:

import logo from './images/logo.png'

logo.png 的路径是 frontend/src/images/logo.png 。
之后我尝试在我的 JSX 组件中使用它，如下所示:

<img src="{logo}" alt="Homepage" />

组件已成功加载，但未显示 Logo 图像。 通过遵循类似问题的解决方案，我也设置了 webpack 配置，但它仍然无法正常工作。

这是我的开发环境的 webpack 配置。

我的根目录中的 webpack 路径如下:

`frontend/node_module/react-scripts/config/webpack.config.dev.js`

按照 link 进行操作我对配置进行了更改:

test: /\.(pdf|jpg|png|gif|svg|ico)$/,
            use: [
                {
                    loader: 'url-loader'
                },
            ]

之后，我使用 npm start 再次启动我的应用程序，它启动成功，但 Logo 图像未显示。

我使用 react@16.4.2 作为前端，并使用 Koa.js 后端和 node@10.8.0

Answer 1

JavaScript 表达式可以在 JSX 内部使用。我们只需要用大括号 {} 将其括起来，但您可以像这样 "{}" 那样将它们括起来，使其成为字符串。删除""，它就会像一个魅力一样工作:

<img src={logo} alt="Homepage" />

JSX In Depth .