I can not show images with reactjs

Question

I can not show images with reactjs

Navigation

#1 by (2 votes)

0

in app.js I want to show an image.

import React, { Component } from 'react';
import './App.css';

import Image from './components/Image';
import Input from './components/Image';

class App extends Component {
  render() {
    return (
      <div>
        <Image
          id={1}
          src="./components/indice.png"
        />
       <img src={require('/components/indice.png')}/>

        <Input
         id={2}
         type="text"
        />

      </div>
    );
  }
}

export default App;

in some posts I read that you have to put the images in the public folder in others to use src = {require (ruta-imagen.jpg) how to do it? I'm just starting with reactjs.

javascript reactjs

asked by Rafael Hernández 09.09.2018 в 11:30

source

1 answer

Separate entity from context Know if a mail exists or not in Node.js

score 2 · Accepted Answer

To show an image the React js, you have two simple ways to do it.

Import the image

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

Example 1

We simply have to import the image to our component, that is

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 is really indifferent in which folder we have the image hosted.

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 you have a component Image, you have passed it an src attribute, which I understand that later in that component you will use it to search for the image.

You can have the image as an attribute from the parent component, that is:

Component Father

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 pick up 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 try.

DEMO

I hope it helped you.

Greetings !!!