javascript - images - Cómo importar una imagen(.svg,.png) en un componente React

react import image public

Question

Estoy tratando de importar un archivo de imagen en uno de mis componentes de reacción. Tengo la configuración del proyecto con el paquete web.

Aquí está mi código para el componente

import Diamond from ''../../assets/linux_logo.jpg'';

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}

Aquí está mi estructura de proyecto.

He configurado mi archivo webpack.config.js de la siguiente manera

{
    test: //.(jpg|png|svg)$/,
    loader: ''url-loader'',
    options: {
      limit: 25000,
    },
},
{
    test: //.(jpg|png|svg)$/,
    loader: ''file-loader'',
    options: {
      name: ''[path][name].[hash].[ext]'',
    },
},

PD. Puedo obtener imágenes de cualquier otra fuente remota pero no imágenes guardadas localmente. La consola de JavaScript tampoco me da ningún error. Por favor, nada ayuda. Soy bastante nuevo para reaccionar e incapaz de encontrar lo que estoy haciendo mal.

Answer 1

Esto puede ser útil para algunos principiantes, ya que yo también lo soy y, de manera vergonzosa, no lo noté: debemos incluir "Imagen" en el método de importación al principio del código.

Asi que:

import { StyleSheet, Text, View, Image} from ''react-native'';

Espero que esto ayude a algunas personas.

Answer 2

Puedes usar require también para renderizar imágenes como

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img src={require(''./logoWhite.png'')} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}

Answer 3

Resuelto el problema, al mover la carpeta con la imagen en la carpeta src. Luego me dirigí a la imagen (proyecto creado a través de "create-react-app")
let image = document.createElement ("img"); image.src = require (''../ asset / police.png'');

Answer 4

Si las imágenes están dentro de la carpeta src / asset, puede usar require con la ruta correcta en la declaración de require,

var Diamond = require(''../../assets/linux_logo.jpg'');

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}

Answer 5

intenta usar

import mainLogo from''./logoWhite.png'';

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img  src={mainLogo} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}