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

Posted 2023-02-19

【中文标题】如何在 Svelte 中使用本地静态图像

【英文标题】：How to use local static images in Svelte

【发布时间】：2019-11-15 15:55:19

【问题描述】：

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

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

let src = './images/background.jpg'
.
.
.
<img src  />

浏览器显示找不到图片。

【问题讨论】：

你能展示你的目录结构吗？

【参考方案1】：

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

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

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

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

【参考方案2】：

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

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

或者

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

<img src  />

【参考方案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://***.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>