（reactjs）包括本地圖像在反應組分

Question

我有以下部件，這使得使用HTML IMG SRC =圖像「..」

export default class Landing extends Component{ 

    render() { 
    return(
    <div className="topimg"> 
     <img src={'test.jpg'}/> 
    </div> 

但頁面不顯示圖像。文件夾結構如下

/layout/Landing.jsx /layour/test.jpg

它適用於網頁的URL而不是本地文件。

Answer 1

不知道你是如何構建你的應用程序，但你可以通過require首先將你的圖像附加到組件。這樣，應用程序知道在渲染之前包含圖像（相對於組件引用的圖像）。

export default class Landing extends Component { 
    constructor(props) { 
    super(props); 

    this.images = { 
     test: require('./test.jpg') 
    }; 
    } 

    render() { 
    return (
     <div className="topimg"> 
     <img src={this.images.test}/> 
     </div> 
    ); 
    } 
}