从父级传入 src 时 ReactJS 图像不显示

Question

开始使用 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"。似乎合法。

但是如果我给控制组件本身添加一个标签，我就能很好地看到图像。

我在这里错过了什么？

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 不喜欢与 "Parent" 分开。违背了组合的目的不是吗？

ReactJS image not displaying when src is passed in from parent