Webpack url-loader 重复内联图像

行反叛者

我是 webpack 的新手,我正在使用带有以下选项的 url-loader:

{
    test: /\.(png|jp(e*)g|svg|gif)$/,  
    use: [
           {
             loader: 'url-loader',
             options: { 
                 limit: 8000 
             } 
           }
         ]
  },

现在,如果我在 index.html 中使用相同的源编写多个图像

<img src="images/exampleimage.png" alt="">
<img src="images/exampleimage.png" alt="">
<img src="images/exampleimage.png" alt="">
<img src="images/exampleimage.png" alt="">
<img src="images/exampleimage.png" alt="">
<img src="images/exampleimage.png" alt="">
<img src="images/exampleimage.png" alt="">

url-loader 会在每个 img 标签中内联 base64 编码的图像,这当然是错误的

那么在不允许这种重复的情况下引用base64编码图像的正确方法是什么?

安德里亚·卡拉罗

这是 的预期行为url-loader如果您希望 Webpack不内联您的本地图像而是发出单独的文件,请file-loader改用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Webpack url-loader jpg文件内联

带有sass-loader和resolve-url-loader的Webpack 4-找不到图像路径

Webpack URL-loader设置目标路径

webpack css-loader在外部样式表的url()引用中找不到图像

Webpack 4-无法使用url-loader在src中加载具有绝对路径的图像

webpack中的url-loader配置正在从React JS项目中的不同路径加载图像

尽管具有文件加载器(url-loader),但图像仍无法通过Webpack加载到React app中

webpack-url-loader 忽略子文件夹

何时在您的webpack配置中使用url-loader?

Webpack && stylus-loader错误地解析了URL路径

Webpack 的 Sass Loader:如何获取 CSS 文件而不是内联样式?

Webpack url-loader 或 file-loader 不工作反应应用程序

Webpack [url / file-loader]无法解析URL的相对路径

使用webpack,less-loader和extract-text-webpack-plugin避免输出重复

Webpack(Encore):使用image-webpack-loader将图像转换为webp

Django Webpack Loader:“资产”KeyError?

url-loader插件是否在<img>标签中内联了URL,如何?

图像不显示在生产版本中,仅在dev(webpack / sass-loader)中显示

无法正确设置webpack svg-inline-loader。SVG图像没有出现

带引导的Webpack Sass-loader

Webpack 2 eslint-loader自动修复

使用webpack css-loader的Sourcemaps

Webpack postcss loader,它的用途是什么?

Webpack 2 sass-loader 意外字符“@”

webpack ts-loader不排除文件

Webpack的angular-translate-loader如何工作?

Webpack 找不到 babel-loader

Webpack无法解析html-loader

Webpack中babel-loader的“排除”选项