React 将导入名称作为 prop 传递并添加到图像 src

我有一个反应组件，它有一个带有包含图像路径的导入名称的道具。

在这种情况下，道具值为Ico1.

我需要像这样在 img src 中传递 prop：

代码如下：

import React from 'react';
import Ico1 from '../icon1.png';


 const MyComp = (props) => <div>

           <img src={props.chosenicon} alt="" />

         </div> 
     }

 </div>

 export default MyComp

我的问题是当我添加这个时：

<img src={Ico1} alt="" />

...它显示图像，但如果我这样做：

<img src={props.chosenicon} alt="" />

...它没有显示任何图像，即使props.chosenicon is 'Ico1' 并且 typeof 表示它们都是字符串。

我怎样才能让它工作以显示图像？

两个组件 - App.js 和 Icon.js 以及名为 icon.jpg 的图像

这是你的 App.js

import React from 'react';
import icon from './icon.jpg';
import Icon from './Icon';

const App = () => (
  <div>
    <h1>This is the app</h1>
    <Icon icon={icon} />
  </div>
);

export default App;

这是你的 Icon.js

import React from 'react';

const Icon = props => (
  <div>
    <p>This is the icon</p>
    <img src={props.icon} alt="" />
  </div>
);

export default Icon;

这是一个工作示例：https://codesandbox.io/s/4z64wyqnn9 https://codesandbox.io/s/4z64wyqnn9