React

Agregar imagen local en React

Buenas buenas, justo estaba terminando un workshop de React y se me ocurrió agregar una imagen local pero vaya desilusión me llevé cuando cambie el src y no se desplegó así que si les sucedió pues vamos a ver cómo lo podemos solucionar.

Para trabajar con imágenes locales en React debemos instalar el siguiente módulo, ojo recuerden que debemos guardarlo para ello podemos anexar el -save o –save-dev

npm install --save-dev url-loader file-loader 

Una vez instalado vamos a agregar una regla en nuestro webpack

module.exports = {

    ...
    module: {
        rules: [
            ...
            {
                test: /\.(png|jpe?g|gif)$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {},
                  },
                ]
            }
        ]
    },
   ...

}

Y ahora nos vamos a dirigir a nuestra etiqueta img donde nuestro src debe quedar algo similar a la siguiente línea

<img src={require('url.jpg')} />

Y listo ya aparece nuestra imagen, nos vemos 🙂

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s