描述bug
无法在我的机器上使用 require() 显示图像。在准备此错误报告时，我在Codesandbox中创建了相同的基本代码，它在那里可以正常工作。
你尝试恢复依赖项了吗？
npm --version
6.14.8你在用户指南中搜索了哪些术语？
require
环境信息
环境信息：
current version of create-react-app: 4.0.0
running from C:\Users\Michael\AppData\Roaming\npm-cache\_npx\13776\node_modules\create-react-app
System:
OS: Windows 10 10.0.17763
CPU: (4) x64 Intel(R) Core(TM) i5-4690K CPU @ 3.50GHz
Binaries:
Node: 12.19.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 86.0.4240.198
Edge: Spartan (44.17763.831.0)
Internet Explorer: 11.0.17763.771
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.0 => 4.0.0
npmGlobalPackages:
create-react-app: Not Found重现步骤
- 使用
npx create-react-app创建应用程序。 - 尝试在App.js的渲染返回中使用
<img src={require("path/to/image/image.png")} />获取图像元素。
预期行为
应该显示两次图标。一次使用import变量，一次使用required。在Codesandbox网站上就是这样工作的。请参考下面的演示。
实际行为
这是我在用 npx create-react-app . 创建的项目中本地运行最小示例时的样子
可复现的演示
https://codesandbox.io/s/react-require-bug-1gh2i?file=/src/App.js:67-292
7条答案
按热度按时间xhv8bpkk1#
到目前为止，在沙箱和本地运行时都没有发现问题。但我在另一个项目中遇到了类似的问题，该项目也使用了
require()作为镜像。通过执行require("path/to/image/image.png").default解决了这个问题，尽管我不确定原因。也许你可以尝试一下，看看是否有所帮助？那个项目使用的是React Scripts 3.4.3和React 16.13.1。在分别更新到4.0.0和17.0.1后发现了这个bug。但我不确定这是否真的是版本更新导致的。
7cwmlq892#
是的。添加
.default似乎可以使其正常工作，因此至少这是一个解决此错误的方法。谢谢。cwtwac6a3#
也经历了这个。只有在react 17之后。
pkln4tw64#
这个问题仍然存在，令人烦恼。刚刚使用npx create-react-app创建项目并测试图片，发现require加载的图片路径是
[object Module],而不是正确的图片路径。尽管如此，导入图片仍然可以正常工作。添加.default可以解决这个问题。h79rfbju5#
对我来说也是同样的问题，最新的CRA与React
^16.14.0。图片加载
[object Module]wmomyfyw6#
复制 #9992
ej83mcc07#
这个问题已经被自动标记为过时，因为它没有任何最近的活动。如果没有发生任何进一步的活动，它将在5天后被关闭。