GridTile（Material-ui）不显示图像

Question

class App extends Component {

render(){
    return (
        <div className="App">
            <MuiThemeProvider>
                <div>
                    <GridList cellHeight={100}>
                        {this.props.data.map((cat) => (
                        <GridTile key={cat.photo} title={cat.title}>
                            {console.log(cat.photo)}
                            <img src={cat.photo} alt={cat.photo}/>
                        </GridTile>))}
                        <GridTile key="wiam.jpg" title="joijoiji">
                            <img src="wiam.jpg"/>
                        </GridTile>
                    </GridList>
                </div>
            </MuiThemeProvider>
        </div>
    );
}

}

"wiam.jpg" is a picture that I copied in my entire project folder, yet it doesn't display, but when I use an absolute link to a picture on a external website, I have no issue.

Where am I supposed to put the image on my server for it to appear ?

Answer 1

I had a similar problem. Images in material-ui components are distributed from the "public" directory. So if you have /public/images/wiam.jpg , src="images/wiam.jpg" should display the image correctly.