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

Question

更新日期：

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

原题

我想在输出中将一个 svelte 组件中的标签 <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.
使用图像来自 react 世界的示例：

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}">

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

Does the url-loader plugin inline URLs in <img> tags, how?

web

webpack

urlloader

svelte-3