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

Question

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

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

现在我正在尝试获取此图像并在加载帖子时显示在前端。 这很简单，但我不知道如何去做。在 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
    };
}

Answer 2

以下是端点发送图像的示例：

import {promises as fs} from 'fs'

export async function GET() {
  const asset = await fs.readFile("sample.jpg")

  return new Response(asset, {
    headers: {
      "Content-Type": "image/jpg"
    }
  })
}