如何在 Svelte 中使用本地静态图像答案

【问题标题】：How to use local static images in Svelte如何在 Svelte 中使用本地静态图像
【发布时间】：2019-11-15 15:55:19
【问题描述】：

我正在按照教程 (https://svelte.dev/tutorial/dynamic-attributes) 导入本地图像文件。但它没有用。在应用程序中找不到图像。

我需要在哪里找到这些图像才能使其像教程中那样工作？

let src = './images/background.jpg'
.
.
.
<img {src} alt="background image" />

浏览器显示找不到图片。

【问题讨论】：

标签： svelte

【解决方案1】：

您将使用的本地图像需要相对于公共文件夹中的 index.html 文件进行引用。所以在你的情况下：

let src = './images/background.jpg'

background.jpg 需要位于“public”文件夹内名为“images”的文件夹中。

您可以将其引用为let src = 'images/background.jpg'

【讨论】：

【解决方案2】：

把你的图片文件夹放在公用文件夹中，然后像这样引用：

<img src="images/background.jpg" alt="background image" />

或者

let src = "images/background.jpg";
.
.
.

<img {src} alt="background image" />

【讨论】：

【解决方案3】：

这是在 svelte 中使用图像的另一种方法：

.banner-container {
    background-image: url("/images/hero-banner.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
}

【讨论】：

这是在 Svelte 中使用图像的首选方式吗？这是我能够链接到图像的唯一方法。从 JS 做，就像评分最高的答案一样，对我不起作用。
为我工作，谢谢！

【解决方案4】：

如果您正在使用 SvelteKit，并且像我一样需要在不创建任何 HTML 组件的情况下获取 DataURL，您可以执行以下操作：

<script context="module">
    // Load the resource (for simplicity I am not using any error
    // handling which you should normally do).
    export const load = async ({ fetch }) => {
        let response = await fetch('/assets/img/favicon.png');
        return {
            props: {
                response,
            },
        };
    };
</script>

<script>
    import { onMount } from 'svelte';

    export let response;

    let dataURL;

    onMount(async () => {
        dataURL = await getDataUrl(response);
    })

    async function getDataURL(response) {
        return blobToDataURL(await response.blob());
    }
    
    function blobToDataURL(blob) {
        // Source: https://stackoverflow.com/a/67551175/3986879
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = (_e) => resolve(reader.result);
            reader.onerror = (_e) => reject(reader.error);
            reader.onabort = (_e) => reject(new Error('Read aborted'));
            reader.readAsDataURL(blob);
        });
    }
</script>

【讨论】：