Webpack：从内联样式加载图像（背景图像）

Question

我在使用webpack加载图片时遇到问题。

当我在html页面上使用图像标记时，一切正常：

 <img src="../../content/images/logo.png">

但我也需要使用内联样式：

<div style="background-image: url('../../content/images/logo.png')">

在这种情况下，webpack不会解析图像并使url()中的字符串保持不变。

Webpack配置：

        module: {
        rules: [
            { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },
            {
                test: /\.ts$/,
                loaders: [
                    'angular2-template-loader',
                    'awesome-typescript-loader'
                ],
                exclude: ['node_modules/generator-jhipster']
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
                options: {
                    minimize: true,
                    caseSensitive: true,
                    removeAttributeQuotes:false,
                    minifyJS:false,
                    minifyCSS:false
                },
                exclude: ['./src/main/webapp/index.html']
            },
            {
                test: /\.scss$/,
                loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
                exclude: /(vendor\.scss|global\.scss)/
            },
            {
                test: /(vendor\.scss|global\.scss)/,
                loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
            },
            {
                test: /\.css$/,
                loaders: ['to-string-loader', 'css-loader'],
                exclude: /(vendor\.css|global\.css)/
            },
            {
                test: /(vendor\.css|global\.css)/,
                loaders: ['style-loader', 'css-loader']
            },
            {
                test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
                loaders: ['file-loader?hash=sha512&digest=hex&name=/images/[hash].[ext]']
            }
        ]
    },

如果有人可以帮我解决这个问题，我将不胜感激。

Answer 1

您可能需要带有interpolation flag enabled的'html'文件：

require("html-loader?interpolate!./your-file.html");

...然后需要你的内联式背景图片，如：

<div style="background-image: url('${require(`../../content/images/logo.png`)}')">

Answer 2

用Google搜索解决方案，并决定制造装载机。 https://github.com/apotap2/url-replace-loader 它只有20行代码：D，它将每一个'url（。*）'替换为require（），因此您可以将其与文件加载器一起使用。如果您需要更复杂的逻辑，似乎自己制作一个装载程序会更快。

Answer 3

在webpack 5上，正确的答案是使用您的html-loader。

更改内联样式：

 ## Heading ##<div background-image="../../content/images/logo.png">

和您的html-loader：

  {
    test: /\.html$/i,
    loader: 'html-loader',
    options: {
      minimize: true,
      attributes: {
        list: [
          '...',// All default supported tags and attributes
          {
            tag: 'div',
            attribute: 'data-background',
            type: 'src',
          }
        ]
      }
    }
  }

Here了解更多详情。

Answer 4

其他解决方案是（如果您不想使用插值标志）

$scope.imageToUse =  require(`../../content/images/logo.png`)

在您的控制器中

并直接在后台使用：url（{{imageToUse}}）

内部webpack会将图像编码为base64，并将其分配给imageToUse变量，该变量随后将呈现到html页面。

此解决方案与在Angular 1.X项目中实现Webpack有关。在其他情况下也可以使用类似的方法。

Answer 5

对我而言，最直接的解决方案是使用this answer中提到的Webpack中的interpolate选项。

{
  test: /\.(html)$/,
  include: path.join(__dirname, 'src/views'),
  use: {
    loader: 'html-loader',
    options: {
      interpolate: true
    }
  }
}

然后在您的HTML中

 <div style="background-image: url('${require('../../content/images/logo.png')')">

Answer 6

非常基本：

<div class="background-design-element" style="background-image: url('<%= require('./../assets/images/test.jpg') %>')"></div>

要记住的关键是：<％= =％> 实际上可能就是这么简单-：-）