Sveltekit 项目如何从端点获取图像

Question

我正在创建一个简单的博客来探索 Sveltekit 及其工作原理。

我创建了一个端点来管理图像的上传，它存储在根文件夹（与 src 相同级别）的文件夹中。

现在我正在尝试获取此图像并在加载 post 时在前端显示。这很简单，但我无法管理如何去做。在 Nodejs 中，通常我会创建一个 API 来在被调用时提供图像（例如 API url 是 /api/v1/images/）：

function get(req, res, next) {
    ...
    var fileStream = fs.createReadStream(imagePath);
    res.writeHead(200, { "Content-Type": "image/" + extensionName });
    fileStream.pipe(res);
    ...
}

在前端我称之为：

<img src={getImageFromBackend("example.jpg")} alt="Example" />

但在 Sveltekit 中我不能这样做。

有什么想法吗？

谢谢

Answer 1

您应该创建另一个端点来提供图像。端点看起来像 this:

import {promises as fs} from "fs";

export async function get() {
    const asset = await fs.readFile("sample.jpg");
    return {
        headers: {
            "Content-Type": "image/jpeg"
        },
        body: asset
    };
}

Sveltekit 项目如何从端点获取图像

Sveltekit project how to get images from endpoint

image

sveltekit