image - 从父级传入src时未显示ReactJS图像

ReactJS入门。有关渲染问题的问题。我有这样一个控制组件：

import myImage from 'myImagePath';
...
render() {
  return (
    <ImageComponent source={myImage} />
  );
}

还有另一个组件ImageComponent：

render() {
  return (
    <img alt="myImage" src={this.props.source} />
  );
}

这不会向页面呈现任何内容。当我console.log this.props.source时，我看到：“ static / media / myImage.png”。似乎是合法的。

但是，如果我向控件组件本身添加标签，我会看到图像很好。

我在这里想念什么？

最佳答案

第一件事）确保ImageComponent.js及其父容器（用于导入图像的容器）在文件树中的同一文件夹中。

|imageFolder
| -img.jpg
|javscriptFolder
| -Parent.js
| -ImageComponent.js

最后）在反应中，Ive最好选择<div style={{ backgroundImage: `url(${this.props.source})` }} />

关于image - 从父级传入src时未显示ReactJS图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49183343/