webpack - 使用 webpack 在 html 中显示图像

Question

当我使用 html-loader 和文件加载器时，在开发模式下，图像不会显示在 src->assets->images 文件夹和 html 文件中的浏览器图像上

请建议我如何在开发和产品模式下运行代码

<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 · Accepted Answer

使用 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')
          }
        }
      ]
    }
  ]
}

这告诉html-loader解释 /app 文件夹中的所有绝对 URL。因此，在我们的中app/templates/foo.html，您可以使用以下...

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

然后，这告诉html-loader您将上述内容视为path.resolve(__dirname, 'app', 'images', 'foo.png')。然后，如果您有 extract-loader 和/或 file-loader，则所有路径都应该是正确的。

webpack - 使用 webpack 在 html 中显示图像

1 回答 1

Related

Reference