Primero editemos el webpack.config.js para poder tener imágenes en nuestra Web.
module: {
rules: [
{
test: /\\.(png|svg|jpg|gif)$/,
type: 'asset',
}
]
},
// ahora es super sencillo porque webpack 5 por defecto ya puede manejar
// extensiones de imágenes
Al momento que queramos usar estas imágenes podemos realizarlo de la siguiente manera
// Header.jsx como ejemplo
import menu from '@icons/icon_menu.svg';
import logo from '@logos/logo_yard_sale.svg'
import shoppingCart from '@icons/icon_shopping_cart.svg';
<img src={menu} alt="menu" className="menu" />
<img src={logo} alt="logo" className="nav-logo" />
<img src={shoppingCart} alt="shopping cart" />
Usemos alias para facilitar la importación y rutas en nuestra aplicación
module.exports = {
resolve: {
alias: {
'@components': path.resolve(__dirname, 'src/components/'),
'@containers': path.resolve(__dirname, 'src/containers/'),
'@pages': path.resolve(__dirname, 'src/pages/'),
'@styles': path.resolve(__dirname, 'src/styles/'),
'@icons': path.resolve(__dirname, 'src/assets/icons/'),
'@logos': path.resolve(__dirname, 'src/assets/logos/'),
'@routes': path.resolve(__dirname, 'src/routes/'),
}
}
}