时间戳

首页 > 解决方案 > Webpack 文件加载器和 Svelte 样式的背景图像不起作用

javascript - Webpack 文件加载器和 Svelte 样式的背景图像不起作用

问题描述

我有带有Webpack的Svelte并安装了文件加载器

webpack.config.jsmodules.esports.module.rules有：

{
    test: /\.(png|jpg|gif)$/,
    use: [
        'file-loader',
    ],
},

在App.svelte我有工作代码：

<script>
    import smile from './smile.jpg';
</script>

<img src={smile}>

这使得工作输出：

<img src="c6999a26a16dceaf99e54f8f00ecd0c5.jpg">

但

这段代码：

<style>
    .smile {background: url('./smile.jpg')}
</style>

<div class="smile"></div>

输出：

<div class="smile svelte-uv69f3"></div>

.smile.svelte-uv69f3 {
    background: url([object Module]);
}

但预期的 CSS 输出是：

.smile.svelte-uv69f3 {
    background: url('c6999a26a16dceaf99e54f8f00ecd0c5.jpg');
}

那么，能修好吗？谢谢

标签： javascriptwebpacksvelte

解决方案

推荐阅读