Para mostrar una imagen el React js, tienes dos formas sencillas de hacerlo.
- Importar la imagen
- Utilizar la url de una imagen que esta en un servidor remoto o local.
Ejemplo 1
Simplemente tenemos que importar la imagen a nuestro componente, es decir
import React, { Component } from 'react';
//Aqui importamos nuestra imagen
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
{/*Y en la etiqueta img simplemente la mostramos*/}
<img src={logo} />
</div>
);
}
}
export default App;
Con el ejemplo 1, realmente es indiferente en que carpeta tenemos alojada la imagen.
Ejemplo 2:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
{/*Aqui utilizamos la url donde esta alojada la imagen*/}
<img src="https://hdwallpaperim.com/wp-content/uploads/2017/08/25/461264-reactJS-Facebook-JavaScript-minimalism-artwork-simple_background-748x421.jpg" />
</div>
);
}
}
export default App;
En tu caso que tienes un component Image, le estas pasado un atributo src, que entiendo que despues en ese componente lo utilizaras para buscar la imagen.
Puedes hacer que desde el componente padre tu le pases la imagen como atributo, es decir:
Componente Padre
import React, { Component } from 'react';
{/*Importamos nuestro componente Image*/}
import Image from './Image';
{/*Importamos la imagen que le vamos a pasar a nuestro componente hijo*/}
import logo from './logo.svg'
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
{/*Renderizamos nuestro componente y le pasamos la imagen importada*/}
<Image src={logo} />
</div>
);
}
}
export default App;
Luego en nuestro componente hijo simplemente tenemos que recoger la dicha imagen por los props.
import React, { Component } from 'react';
class Image extends Component{
render() {
return(
{/*Mostramos la imagen que nos viene del componente padre, en la etiqueta*/}
<img src={this.props.src} />
)
}
}
export default Image;
Aquí tienes el codigo para poder probar.
DEMO
Espero que te haya ayudado.
Saludos!!!