如何在+page.js load()函数中导入图像？

Question

我正在尝试用 Svelte 建立一个博客，我的文件夹结构如下：

• 帖子：
  • slug1：
    • 横幅.webp
    • 内容.md
  • ...
• 源代码：
  • 博客：
    • +页面.svelte
    • +page.server.ts
    • [蛞蝓]：
      • +页面.svelte
      • +page.server.ts

在 src/blog/[slug]/+page.server.ts 中我有以下代码：

import { getPostMetadata, getPostBannerImageURL } from "$lib/blog"
import type { PageServerLoad } from './$types';

export const prerender = true;

export const load: PageServerLoad = async ({ params }) => {
    return {
        slug: params.slug,
        metadata: getPostMetadata(params.slug),
        bannerURL: // Code I am trying to figure out
    };
};

我希望我的代码是服务器端渲染的，并且我希望能够静态编译它。我想将横幅图片（/posts/${params.slug}/banner.webp）添加到Vite的优化资源中，并获取正确的URL才能显示。

我尝试动态导入图像但不起作用：

bannerURL: await import(`../../../posts/${params.slug}/banner.webp`)

我有以下错误：

TypeError: Cannot convert object to primitive value
    at String (<anonymous>)
    at escape_html (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/chunks/index.js:30:15)
    at _page (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/entries/pages/blog/_slug_/_page.svelte.js:8:416)
    at children (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/chunks/internal.js:1155:9)
    at _layout (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/entries/pages/_layout.svelte.js:202:3)
    at Root (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/chunks/internal.js:1150:5)
    at render (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/chunks/index.js:99:3)
    at Function._render [as render] (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/chunks/internal.js:1112:20)
    at render_response (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/index.js:1800:34)
    at async render_page (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/index.js:2627:12)

Answer 1

动态导入包括整个模块，我怀疑该错误是预期与加载函数实际返回的内容不同的副作用。

您可能需要获得

default

导出：

await import(`../../../posts/${params.slug}/banner.webp`).then(m => m.default)