display image in html using webpack

Question

when i use html-loader and file loader then in development mode image in not dispaly on browser images in src->assets->images folder and in html file

please suggest me what i can do to run the code in both development and product mode

<html>
    <head>Webpack</head>
    <body>
        <h1>Hi...................!</h1>
        <h1>Owsam!</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'
    })]
}

score 0 · Answer 1 · answered Dec 08 '21 at 06:45

using webpack 4

module: {
  rules: [
    // other stuff above.....
    {
      test: /\.html$/,
      use: [
        // ...The other file-loader and extract-loader go here.
        {
          loader: 'html-loader'
          options: {
            // THIS will resolve relative URLs to reference from the app/ directory
            root: path.resolve(__dirname, 'app')
          }
        }
      ]
    }
  ]
}

This tells the html-loader to interpret all absolute urls from the /app folder. So in our app/templates/foo.html, you can then use the following...

<img src="/images/foo.png" />

This then tells html-loader to see the above as path.resolve(__dirname, 'app', 'images', 'foo.png'). Then if you have extract-loader and/or file-loader, all the paths should be correct.

display image in html using webpack

1 Answers1