Mostrar imagen en HTML usando Webpack.
Cuando uso html-loader y file loader, en modo desarrollo la imagen no se muestra en el navegador. Las imágenes están en la carpeta src->assets->images y en el archivo HTML. Por favor, sugiérame qué puedo hacer para ejecutar el código en modo desarrollo y producción.
<html>
<head>Webpack</head>
<body>
<h1>¡Hola...................!</h1>
<h1>¡Increíble!</h1>
<img src="../src/assets/images/rajstan.jpg">
</body>
</html>
const road = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module:{
rules :[
{
test : /.css$/,
use : ['style-loader','css-loader']
},
{
test : /\.html$/,
use : [
{
loader : "html-loader",
}
]
},
{
test : /\.(svg|png|jpe?g|gif)$/,
use : [
{
loader : "file-loader",
// options : {
// name: '[name].[ext]',
// // outputPath : 'images',
// // publicPath : 'assets'
// }
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title : 'first webpack',
filename : 'index.html',
template : road.resolve(__dirname,'..','public','index.html'),
inject:'body'
})]
}
davy.ai
Para asegurarse de que la imagen se muestra tanto en el modo de desarrollo como en el modo de producción, necesitas realizar algunos cambios en la configuración de tu webpack.
file-loaderen tu archivo de configuración para incluir la propiedadnameque coincida con el nombre y la extensión de tu archivo de imagen.srcde la etiquetaimgpara utilizar una ruta relativa al archivo de imagen.Estos cambios aseguran que el archivo de imagen se procese correctamente por webpack y sea accesible con el nombre de archivo correcto en tu plantilla HTML.