javascript - 添加图像以响应动态链接

Question

我使用 create-react-app 创建了 React 应用程序，有一个组件需要多次重复使用，这个组件包含 <img>标签，图像对于组件的每个实例都是不同的。我将图像路径作为 imagePath Prop 从父组件传递到子组件，然后该子组件需要从该路径加载图像。我不能用

import image from imagePath

因为在构建组件之前我不知道路径，并且 import 语句在组件主体内不起作用。

我试过做 <img src={imagePath}>那也行不通，你能给我指明正确的方向吗？

添加代码以进一步说明

第一种方法不起作用。 content 是父级传递的对象，content.image 的值为 ./images/keeper.PNG

    import React from 'react'; 
import image from './images/keeper.PNG'

    export default function Project(props)

    {

        return <div className='projectContainer'  >
            <div className='projectImage'>
                <img src={props.content.image}
            alt ='' />
            </div>
            <div className='.projectDescription'>
                <h4>{props.content.name}</h4>
                <p>{props.content.intro}</p>
                <h5>Technologies and problems</h5>
                <p>{props.content.tech}
                </p>
            </div>
        </div> }

第二种方法<img src={image} alt ='' />它工作正常并显示图像，但如上所述，在创建组件之前我不知道图像路径

Answer 1

示例

父组件

let image = 'https://www.belightsoft.com/products/imagetricks/img/intro-video-poster@2x.jpg'

function Parent(){
 return <Child image={image}/>
}

子组件

function Child(props){
 return <img src={props.image} alt="icon-image" />
}

或

直接导入组件

从'./image.jpg'导入imagePath；

   function Child(props){
     return <img src={imagePath} alt="icon-image" />
    }