url-loader 插件是否在 <img> 标签中内联 URL，如何？

Question

日期：

虽然我无法确定这是功能还是错误。 url-loader 似乎无法处理 Svelte 组件中使用的资产，除非这些资产是通过 require 加载的。所以我想知道使用 Webpack 4（一个 Svelte 组件源）加载/预处理更常见或推荐的方法是什么，以便 HTML 标签和 CSS 样式中 src/url 中使用的所有图像资产都内联，即转换为使用 HTML 或 CSS 输出文件中嵌入的 base64 数据。

原始问题

我希望在输出中将标签<img src="./assets/logo.png"> 转换为<img src="data:image/png;base64,iV...CC">，但如果我将url-loader 添加到我的webpack.config.js 文件中，如下所示：

module: {
  rules: [
    //...
    {
      test: /logo.png/,
      loader: (process.stdout.write("!!!\n"), 'url-loader')
    }

src 中的 URL 在输出中仍然显示为 "./assets/logo.png"，即使控制台显示“！！！”在 webpack 构建过程中没有错误，为什么 url-loader 没有进行转换？文件logo.png 的大小约为 3KB，但我不确定这是否是问题所在，因为它的大小很小。

图片正在使用here，如下所示：

<div id="app">
{#if path === '/'}
  <span on:click={navigateToSettings} id="menu"><div class="hamburger" /></span>
{/if}
{#if path === '/settings' && isStored()}
  <span on:click={cancel} id="menu"><div class="close" /></span>
{/if}
  <img class='logo' src='./assets/img/logo.png' alt='Spark'>
{#if connected}
  <span id="status" class="green">•</span>
{:else}
  <span id="status" class="red">•</span>
{/if}
  <div id="content">
    <RouterView />
  </div>
</div>

我在音频文件规则之前添加了url-loader 规则here：

module: {
  rules: [
    //...
    {
      test: /logo.png/,
      loader: (process.stdout.write("!!!\n"), 'url-loader')
    },
    {
      test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
      loader: 'url-loader'
    },

Answer 1

如果您将webpack 和url-loader 与任何现代前端框架一起使用，通常的做法是通过require 使用图像。
来自reactworld 的示例：

import iconMore from “../path_to_image/name_of_image.jpg”;

const Icon = (props) => {
  return <img src={iconMore} />
}

有关更多示例，请参阅this 问题。

我还发现了svelte-assets-preprocessor - 您可以将它与url-loader 配对使用，而无需直接使用require，但实际上它是相同的技术：

  module: {
    rules: [
      ...
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'images',
        }
      },
      {
        test: /\.(html|svelte)$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader',
          options: {
            preprocess: require('svelte-assets-preprocessor')({ /* options */ exclude: [ (attr) => !/\.(png|svg|jpg|gif)$/.test(attr)} ])
          },
        },
      },
      ...
    ]
  }

输入

<img src="./example.png">

输出

<script>
    import ___ASSET___1 from './example.png';
</script> 

<img src="{___ASSET___1}">