webpack - webpackを使用してhtmlで画像を表示する

Question

html-loader と file 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