反应图像源不需要读取变量

Question

我正在尝试通过props动态渲染图像。

当我对img src进行硬编码时，我可以渲染图像：

<img src={require('uploads/logo2-1537302321809.png')} />

当我尝试通过props

进行渲染时

<img src={require(`${profile.image.URL}`)} />

我得到一个错误：

错误：找不到模块“ uploads / logo2-1537302321809.png”。

Answer 1

尝试

const picture = 'picture.jpg';
<img src = {require(`./images/${picture}`)}/>

Answer 2

我确实认为this应该可以为您提供帮助。关键是要创建一个单独的组件，用于存储所有图像，并在需要时调用它们。

示例：

“图像存储”：

    const images = {
    something: require(‘./path/image’)
};
export default Images;

导入：

import Images from ‘whatever_you_name_this’;

<img source={Images.something} />