4

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

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

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

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

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

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

网络包配置：

        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]']
            }
        ]
    },

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

4

7 回答 7

7

您可能需要启用了插值标志的“html”文件：

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

...然后需要您的内联样式背景图像，例如：

<div style="background-image: url('${require(`../../content/images/logo.png`)}')">
于 2017-05-21T18:38:14.457 回答
1

用谷歌搜索自己的解决方案，并决定制作一个装载机。 https://github.com/apotap2/url-replace-loader 它只有 20 行代码 :D 它只是用 require() 替换了每个'url(.*)' 所以你可以将它与文件加载器一起使用。如果您需要更复杂的逻辑，那么自己制作加载器似乎更快。

于 2018-07-02T16:54:52.613 回答
1

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

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

在你的控制器中

并直接在您的背景中使用： url({{imageToUse }})

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

该解决方案与在 Angular 1.X 项目中实现 webpack 有关。类似的方法可以应用于其他情况。

于 2018-12-24T12:36:57.310 回答
1

在 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',
          }
        ]
      }
    }
  }

在这里了解更多详情。

于 2020-11-08T07:40:06.043 回答
0

对我来说最直接的解决方案是使用这个答案interpolate中提到的 Webpack 中的选项。

{
  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')')">
于 2019-08-04T16:56:05.787 回答
0

interpolate选项被删除1.0.0

在此处查看更改日志：https ://github.com/webpack-contrib/html-loader/blob/master/CHANGELOG.md

由于1.0.0,interpolate选项被删除，因此url('{require(...)}')不再可能使用。

我现在采取的替代方法是将CopyWebpackPlugin所有背景图像源克隆到dist（输出）文件夹中，并使用相对路径获取 html 中的源文件。

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

但是使用这种方式你也会失去那些背景图像源的tree-shaking，实际上不可能在url()中使用源别名，所以它只是一种临时方式:(

const CopyPlugin = require('copy-webpack-plugin');
...

plugins: [
   ...,
   new CopyPlugin(
      {
        patterns: [
          ...
          { 
            from: 'src/assets/images/background-image',
            to: 'assets/images/background-image',
          }
          
        ]
      }
    )

]

于 2022-01-19T07:59:47.970 回答
0

非常基本的只是：

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

关键是要记住：<%= =%> 其实可以这么简单 - :-)

于 2020-05-19T13:29:43.387 回答