无法使用带有 webpack 的 react@16.4.2 组件加载静态图像

Question

我正在尝试在名为 Top.js 的组件中加载静态图像，因此我在 Top.js:

中导入了如下所示的图像

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

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

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

组件加载成功，但未显示徽标图像。通过遵循类似问题的解决方案，我也设置了 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 启动了我的应用程序，它启动成功，但未显示徽标图像。

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

Answer 1

JavaScript 表达式可以在 JSX 中使用。我们只需要用大括号 {} 将其包裹起来，但您通过像这样 "{}" 包裹它们来使其成为一个字符串。删除 ""，它会像一个魅力：

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

Unable to load static image with react@16.4.2 component with webpack