ReactJS image not displaying when src is passed in from parent

Question

Getting started with ReactJS. Question on a rendering issue. I have a control component as so:

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

And another component, ImageComponent:

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

This renders nothing to the page. When I console.log this.props.source I see: "static/media/myImage.png". Seems legit.

But if I add an tag to the control component itself, I see the image just fine.

What am I missing here?

Answer 1

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

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

最后）反应过来，我对<div style={{ backgroundImage: `url(${this.props.source})` }} />

运气好了

Answer 2

进一步调查，只有在使用'react-bootstrap'Carousel组件时才会出现此问题。将导入的图像作为属性正常传递到具有直接ReactJS的另一个组件正在按预期工作。

我认为Carousel.Item不喜欢与它的“父母”分开。打败组成的目的不是吗？