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 🙂