如何在我的 HTML 页面中显示来自 Catalyst Filestore 的图像文件？

Question

我正在尝试使用 Catalyst Web 客户端托管构建一个图库应用程序，我需要在我的 Web 应用程序中显示存储在 Filestore 中的图像。我尝试使用 getDownloadLink() Web SDK 方法中的 URL 在 img 标记中显示图像，但似乎不起作用。

有人可以帮助我为我的用例提供解决方案吗？

Answer 1

getDownloadLink() 方法中的 URL 将以附件形式返回文件，因此您将无法在图像标签中显示该文件。要显示 img 标签中的图像，您需要使用Catalyst 高级 I/O 功能 下载文件并在响应中发送文件对象。您可以在 img src 中使用函数 URL 端点。

您可以在下面找到执行相同操作的示例催化剂节点函数：

'use strict';
var express = require('express');
var app = express();
var catalyst = require('zcatalyst-sdk-node');

app.use(express.json());

app.get('/url:id', async (req, res) => {
    const capp = catalyst.initialize();
    const fileid = req.params.id;
    let filename = (req.query.filename)
    let filestore = capp.filestore();
    let foldere = filestore.folder('<YOUR_FOLDER_ID>');
        try {
            const fileBuffer = await foldere.downloadFile(`${fileid}`);
            console.log('fileBuffer:', fileBuffer, 'Type: ', typeof (fileBuffer));
            if (fileBuffer) {
                res.writeHead(200, { 'Content-Type': 'image/png' });
                res.end(fileBuffer);
            } else {
                res.status(500).send('Cannot send File');
            }
        } catch (error) {
            res.status(500).send(error)
        }
    }
)

module.exports = app;

您可以将文件 ID 从客户端 JS 发送到函数 URL。