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

【问题标题】：Sveltekit project how to get images from endpointSveltekit 项目如何从端点获取图像
【发布时间】：2022-10-23 20:32:47
【问题描述】：

我正在创建一个简单的博客来探索 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 中，我不能这样做。

有任何想法吗？

谢谢

【问题讨论】：

标签： image sveltekit

【解决方案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
    };
}

【讨论】：

【解决方案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"
    }
  })
}

【讨论】：