无法通过Webpack加载带有react@16.4.2组件的静态图像

Question

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

#ifdef MYDLL_EXPORTS
#define MYDLL_API __declspec(dllexport)
#else
#define MYDLL_API __declspec(dllimport)
#endif

logo.png的路径是import logo from './images/logo.png' 。
之后，我尝试在JSX组件中使用此组件，如下所示：

frontend/src/images/logo.png

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

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

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

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

通过遵循link，我在配置中做了如下更改：

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

此后，我再次使用test: /\.(pdf|jpg|png|gif|svg|ico)$/, use: [ { loader: 'url-loader' }, ] 启动了我的应用，并且启动成功，但是徽标图像未显示。

我在Koa.js后端和npm start的前端使用react@16.4.2

Answer 1

JavaScript表达式可以在JSX内部使用。我们只需要用大括号{}来包装它，但是您可以像这样"{}"一样将它们包装成字符串。删除""，它将像超级按钮一样工作：

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

JSX In Depth。