1

en app.js quiero mostrar una imagen.

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;

en algunos post he leido que hay que poner las imagenes en la carpeta public en otros usar src={require(ruta-imagen.jpg) como se hace? recien estoy empezando con reactjs.

5 respuestas 5

7

Para mostrar una imagen el React js, tienes dos formas sencillas de hacerlo.

  1. Importar la imagen
  2. 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!!!

1
  • La extenxión de la imagen tiene que ser svg? ó puede ser diferentes formatos? Commented el 16 sept. 2021 a las 13:03
2

En react no puedes importar nada que este fuera de la carpeta src.

Si colocas las imagenes en la carpeta public, para obtener las imagenes debes hacerlo de esta manera:

const imagen = 'imagenes/imagen.jpg'

siendo de esta manera que esta buscando la carpeta imagenes dentro de la carpeta public.

Si quieres importarlas como tal y no guardar la ruta en una constante, debes colocar tu carpeta de imagenes dentro de la carpeta src.

1

si quieres mantener tu carpeta assets en src y además cargar imágenes dinámicamente en un componente, puedes usar require.context(). require.context es de webpack

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

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

Tambien tienes que tener cuidado con el homepage especificado en package.json. Si tienes una entrada:

homepage: /subdomain

, tienes que poner en tu src:

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

En realidad, algunos comentarios de arriba están mal. Si puedes colocar dentro de la carpeta de public los recursos de las imagenes, solo que para llamarlos, no debes colocar el ../ para salir del directorio, solo debes colocarlo de una manera normal, por ejemplo.

Aqui importo una imagen que está dentro de una carpeta, que está dentro de public.

(Manera correcta) = { introducir la descripción de la imagen aquí }

(Manera incorrecta) = { introducir la descripción de la imagen aquí }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.