反应和要求：错误：找不到模块“。”答案

【问题标题】：React & require: Error: Cannot find module "."反应和要求：错误：找不到模块“。”
【发布时间】：2019-02-06 03:48:54
【问题描述】：

我有一个相当简单的无状态组件

const Image = ({
    uri,
}) => {
    function getImage(uri) {
        return require(uri);
    }

    return (
        <img
            className='image'
            src={getImage(uri)} />
    )
}

export default Image;

这给了我

错误：找不到模块“。” webpackMissingModule

图片位于我的应用程序的assets 文件夹中。

我也试过

<img
    lassName='image'
    src={require(uri)} />

路径看起来像'../../assets/someImage.jpg'

为什么我不能将require 与变量名一起使用？当我对路径进行硬编码时，它可以工作......我给出的路径不可能是错误的，因为如果使用错误的路径，我会得到类似的东西

...未找到：无法解决 ....

【问题讨论】：

src={require(uri)} 你能检查一下这对你有用吗
在反应中使用 src={require(pathvariable)} 你需要导入图像，但如果你在没有导入的情况下使用它，那么使用内联 require
@Stophface uri 变量给出了什么，我尝试过它对我有用。
@Stophface 应该是，require('path/to/file.js' )
@Stophface 您能否仅发布图像所在的文件夹结构以及您正在调用图像的组件，这可能是正确引用路径的一个小问题。所以我可以更新答案

标签： javascript reactjs webpack require

【解决方案1】：

我在你的代码中注意到了两件事。

当你想为 jsx 元素添加 css 样式时，你需要使用 className 而不是 lassName。不知道是不是笔误：）

当你想导入图片并添加到 src 的路径时。

执行以下操作并确保您的图像路径正确。

import uri from '../../assets/someImage.jpg';
<img
className='image'
src={uri} />

【讨论】：

【解决方案2】：

问题出在require() 本身。 require() get 在应用程序启动时被触发。当静态传递路径时，require() 知道应用程序启动时在哪里查看，一切都很好。但是，当动态传递路径时，require() 不知道在应用程序启动时在哪里查找图像。因此，它没有找到它。这就是为什么requiere() 不能采用动态创建的路径。

使用index.html 或public 文件夹中的相对src=''（取决于您的配置）。

【讨论】：

【解决方案3】：

如果是网址

 <img src={'https://cdn-images-1.medium.com/max/1600/1*DsD06sTC-X5AVj_m9nElRg.jpeg'}></img>

或者您可以将 url 存储在变量中并在 src 中使用，如

var url = 'https://cdn-images-1.medium.com/max/1600/1*DsD06sTC-X5AVj_m9nElRg.jpeg';
        <img src={url}></img>

如果它是 src 文件夹中的文件

<img src={require('./logo.svg')}></img>

在你的情况下-解决方案

 getImage = (url) => {
     return require(`${url}`)
   }

  <img src={this.getImage(url)}></img>

【讨论】：

在要求中，您需要将其作为可以连接的字符串传递，或者在 es6 中您可以使用模板文字。