reactjs - practicas - ¿Cómo hago referencia a una imagen local en React?

react con base de datos

Question

¿Cómo puedo cargar la imagen del directorio local e incluirla en la etiqueta reactjs img src ?

Tengo una imagen llamada one.jpeg dentro de la misma carpeta que mi componente y probé tanto <img src="one.jpeg" /> como <img src={"one.jpeg"} /> dentro de mi función de render pero La imagen no aparece. Además, no tengo acceso al archivo de webpack config ya que el proyecto se creó con la línea de comandos oficial create-react-app .

Actualización: esto funciona si primero importo la imagen con import img from ''./one.jpeg'' y la uso dentro de img src={img} , pero tengo tantos archivos de imagen para importar y, por lo tanto, quiero usarlos en el formulario, img src={''image_name.jpeg''} .

Answer 1

Debe ajustar la ruta de origen de la imagen dentro de {}

<img src={''path/to/one.jpeg''} />

webpack usar require si usa webpack

<img src={require(''path/to/one.jpeg'')} />

Answer 2

Dentro de la carpeta pública, cree una carpeta de activos y coloque la ruta de la imagen en consecuencia.

<img className="img-fluid" 
     src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`} 
     alt="logo"/>

Answer 3

En primer lugar, envuelva el src en {}

Entonces, si usa Webpack; En lugar de: <img src={"./logo.jpeg"} />

Es posible que necesite usar requieren:

<img src={require(''./logo.jpeg'')} />

Otra opción sería importar primero la imagen como tal:

import logo from ''./logo.jpeg''; // with import

o ...

const logo = require(''./logo.jpeg); // with require

luego enchufarlo ...

<img src={logo} />

Recomiendo esta opción, especialmente si está reutilizando la fuente de la imagen.

Answer 4

La mejor manera es importar la imagen primero y luego usarla.

import React, { Component } from ''react'';
import logo from ''../logo.svg'';
export default class Header extends Component {
  render() {
    return (
      <div className="row">
        <div className="logo">
          <img src={logo} width="100" height="50" />
        </div>
      </div>
    );
  }
} 

Answer 5

Lo he usado de esta manera, y funciona ... Espero que sea útil.

const logofooter = require(''../../project-files/images/logo.png'');

 return(
 <div className="blockquote text-center">
            <img src={logofooter} width="100" height="80" />
 <div/>
);

Answer 6

Mi respuesta es básicamente muy similar a la de Rubzen. Yo uso la imagen como el valor del objeto, por cierto. Dos versiones me funcionan:

{
"name": "Silver Card",
"logo": require(''./golden-card.png''),

o

const goldenCard = require(''./golden-card.png'');
{ "name": "Silver Card",
"logo": goldenCard,

Sin envoltorios, pero esa es una aplicación diferente también.

También he comprobado la solución de "importación" y en algunos casos funciona (lo que no es sorprendente, se aplica en el patrón App.js en React), pero no en el caso anterior.

Answer 7

la mejor manera de importar imágenes es ...

import React, { Component } from ''react'';

// image import
import CartIcon from ''../images/CartIcon.png'';

 class App extends Component {
  render() {
    return (
     <div>
         //Call image in source like this
          <img src={CartIcon}/>
     </div>
    );
  }
}

Answer 8

import React from "react";   
import image from ''./img/one.jpg'';

class Image extends React.Component{
  render(){
    return(
      <img className=''profile-image'' alt=''icon'' src={image}/>
   );
  }
}

exportar imagen predeterminada

Answer 9

import image from ''./img/one.jpg'';

class Icons extends React.Component{
    render(){
      return(
        <img className=''profile-image'' alt=''icon'' src={image}/>
    );
    }
}
export default Icons;