image - 从父级传入 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”。似乎是合法的。

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

我在这里想念什么？

score 0 · Accepted Answer

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

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

最后）在反应中，我有更好的运气<div style={{ backgroundImage: `url(${this.props.source})` }} />

score 0 · Accepted Answer

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

我想 Carousel.Item 不喜欢与其“父母”分开。违背了构图的目的，不是吗？

2 回答 2