要求功能不适用于反应中的图像

Posted 2023-02-22

【中文标题】要求功能不适用于反应中的图像

【英文标题】：require function not working with image in react

【发布时间】：2021-03-02 18:28:07

【问题描述】：

我在 React 中多次使用<img src=require('./somRelativePath/image.jpg)。但是，这一次它似乎不起作用。没有任何错误（例如找不到图像等），但网站上的图像损坏。

在检查了元素后，我对浏览器中的转译结果感到有些困惑：

<img src="[object Module]" style="width: 5rem;">

看起来好像它将图像作为组件而不是实际文件加载。我用npx create-react-app 创建了这个应用程序，到目前为止还没有弹出它。因此，babel 或 webpack 配置中没有错误，因为它目前由后台的 react 处理。

使用import 语句导入它就可以了：

import calendarPic from '../assets/pictures/calendar.svg';

不幸的是，这不是解决方案，因为我将本地图像保存在 json 中，而且加载所有 50 张图像肯定会非常重复且无效。

使用同样的npx create-react-app，我以前做过一些小项目，但从未遇到过如此令人困惑但又如此基本的错误。我已经浏览了整个互联网上所有可能的解决方案，因此我将非常感谢您的任何回复。

再次感谢您，祝您有愉快的一天！

【问题讨论】：

这能回答你的问题吗？ link

好吧，我无法访问 .webpack 配置文件，因为它是由 react 处理的，所以我必须将其弹出。你推荐@Darkshadow 吗？

【参考方案1】：

使用这个，它对我有用

<img src=require('./somRelativePath/image.jpg').default

---

解释：

let image1require('./somRelativePath/image.jpg') 的值与 import calendarPic from './somRelativePath/image.jpg';

如果你控制它们，来自calendarPic 的值是一个路径，但如果你使用require，则值是一个对象like here。

【讨论】：

谢谢，我已经为这个问题苦苦挣扎了一段时间，最后我总是使用我觉得不太适合我的替代方法。

【参考方案2】：

我想问题是图像的位置。当您使用create-react-app 时，应用程序将捆绑到public 文件夹中。然后require 语句将开始获取图像 - 在这种情况下是相对于public 文件夹而不是src 文件夹。

我建议您尝试将图像移动到 public 文件夹中，并尝试使用带有相对于 public 文件夹的 URL 的 src。 Demo这里

【讨论】：

是的，这一定会奏效。你每次编写 React 应用程序时都这样使用它吗？

我通常使用import Image from './source/，因为我使用的图片不多。阅读更多关于这两种方法之间权衡的信息here