网址加载器插件是否在标签中内联网址<img>，如何？

Question

Udate：

虽然我无法找出这是一个功能还是一个错误。似乎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')
}

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

此处使用的图像如下所示：

<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规则：

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

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

我也发现了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}">