Webpack:非<img src =“ ./ images / image.jpg”>格式的图像无法正常工作

时间:2019-11-13 15:52:00

标签: webpack

有人能帮我重新打包吗?我是新手,但在将对设置为简单HTML src图像的图像的引用捆绑在一起时遇到一些问题,即

<img src="./images/birdpoo.jpg">

工作正常,但是当它通过例如featherlight灯箱之类的东西引用时

data-featherlight="./images/birdpoo.jpg"

或google maps自定义图标,例如

icon: './images/birdpoo.png'

它拉屎在床上,但找不到该图像。我是否需要其他加载器来处理未通过HTML图像链接捆绑在一起的图像?谁能指出我的工作示例或文档的方向?

我的webpack.config.js就是这样:

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            'css-loader',
            'sass-loader'
          ]
        })
      },
      {
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: "fonts"
            }
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name].[hash].[ext]",
            outputPath: "imgs"
          }
        }
      }
    ]
  },
  entry: "./src/index.js",
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/template.html"
    }),
    new HtmlWebpackPlugin({
      filename: 'privacy.html',
      template: 'src/privacy.html',
      chunks: ['main']
    }),
    new ExtractTextPlugin("styles.css")
  ]

};

0 个答案:

没有答案