I can't display images with reactjs

To display an image in React js, you have two easy ways to do it.

1. import the image
2. Use the url of an image that is on a remote or local server.

Example 1

We simply have to import the image into our component, ie

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;

With example 1, it really doesn't matter which folder we have the image stored in.

Example 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;

In your case that you have an Image component, you are passing it a src attribute, which I understand that later in that component you will use it to search for the image.

You can make that from the parent component you pass the image as an attribute, that is:

Parent Component

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;

Then in our child component we simply have to fetch the said image by the 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;

Here is the code to test.

DEMO

I hope it helped you.

Cheers!!!

In react you can't import anything outside of the src folder.

If you put the images in the public folder, to get the images you must do it this way:

const image = 'images/image.jpg'

being in this way that it is looking for the images folder inside the public folder.

If you want to import them as such and not save the path to a constant, you should put your images folder inside the src folder.

if you want to keep your assets folder in src and also load images dynamically in a component, you can use require.context() . require.context is from webpack

const cargarImagen = require.context("./tu_patch_assets", true);

<img src={cargarImagen(`./${ nombre_imagen }.jpg`)} alt={nombre_imagen} />

You also have to be careful with the homepage specified in package.json. If you have a ticket:

homepage: /subdomain

, you have to put in your src:

src={"./subdomain/"+filename+".jpg"}

Actually some comments above are wrong. If you can place the image resources inside the public folder, only to call them, you should not place the ../ to leave the directory, you should only place it in a normal way, for example.

Here I import an image that is inside a folder, which is inside public.

(correct way) = { }

(wrong way) = { }