添加圖像以響應動態鏈接

Question

我使用 create-react-app 創建了反應應用程序，有一個組件需要多次重用，該組件包含<img>標簽，組件的每個實例的圖像都不同。 我將圖像路徑作為imagePath道具從父組件傳遞到子組件，然后該子組件需要從該路徑加載圖像。 我不能用

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" />
    }

Answer 2

嘗試以這種方式使用它，您可以在其中通過 props 傳遞 imagePath

<img src={require(`${props.imagePath}`)} />

僅此一項就可以完成工作。

使用 Webpack 時，您需要要求圖像以便 Webpack 處理它們，這可以解釋為什么外部圖像加載而內部圖像不加載，因此您需要使用 img src= {require( '/imagePath')} 將 imagePath 替換為每個圖像的正確圖像名稱。 這樣 Webpack 就能夠處理和替換源 img。