Question

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

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与变量名一起使用？当我对路径进行硬编码时，...给出的路径不会错，因为如果使用错误的路径，我会得到类似的信息

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

Answer 1

问题是require()本身。应用启动时，require()被解雇。当静态传递路径时，require()知道应用启动时在哪里寻找，一切都很好。但是，当路径动态传递时，require()在启动应用程序时不知道在哪里寻找图像。因此，它找不到它。这就是requiere()无法采用动态创建的路径的原因。

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

Answer 2

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

当您要将CSS样式添加到jsx元素时，需要使用className而不是lassName。不知道这是否是拼写错误：）

当您要导入图像并将路径添加到src时。

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

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

Answer 3

如果是网址

aria-controls

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

aria-labelledby

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

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

在您的情况下-解决方案

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

反应并要求：错误：找不到模块“。”

3 个答案: