Best way to show images in a custom node

NoxTav · March 7, 2025, 9:06am

Describe the problem/error/question

I’ve been working on showing an image in a custom declarative node.

I found the fileType field in the binary data returned, and no clear documentation on how to do complex declarative nodes, such as how to show a binary data for instance.

Is there a more complete “how to build your own node” documentation that docs.n8n.io? Is this routing.output.postReceive the best way to show an image, or is there another way that would be totally different? (I have multiple HTTP requests in my node and only one that returns an image, so I don’t want to do a run function just for one endpoint.)

{
    postReceive: [async (items): Promise<INodeExecutionData[]> => {
        let bufferData = Buffer.from(items[0].json as unknown as ArrayBuffer);
        const base64Data = bufferData.toString('base64');
        return [{
            binary: {
                data: {
                    data: base64Data,
                    mimeType: 'image/png',
                    fileSize: bufferData.length.toString(),
                    fileType: 'image'
                },
            },
            json: {},
        }];
    }],
}

What is the error message (if any)?

Please share your workflow

(the most basic one, I don’t think it matters)

Share the output returned by the last node

The output is what I want, my question is more about implementation.

Information on your n8n setup

n8n version: 1.80
Database (default: SQLite): default I think
n8n EXECUTIONS_PROCESS setting (default: own, main): default I think
Running n8n via (Docker, npm, n8n cloud, desktop app): docker
Operating system: ubuntu 24.04

Akram · March 9, 2025, 5:04pm

I had the same issue as you before and it seems you can’t do that with declarative nodes. So I ended up converting it into programmatic node in order to receive my image correctly.

To get an idea you check have a look at my code on github:

github.com/adevk/generate-text-image-node

nodes/GenerateImage/Functions.ts

main

import { IHookFunctions, IExecuteFunctions, IHttpRequestMethods, IDataObject, IRequestOptions, NodeApiError, JsonObject } from "n8n-workflow";

export async function apiRequest(
	this: IHookFunctions | IExecuteFunctions,
	method: IHttpRequestMethods,
	endpoint: string,
	qs: IDataObject,
	option: IDataObject = {},
	uri?: string | undefined,
): Promise<any> {
	// const credentials = await this.getCredentials('generateImageApi');

	// qs.api_key = credentials.api_key as string;

	const options: IRequestOptions = {
		method,
		qs,
		uri: uri || `https://dummyjson.com${endpoint}`,
		json: false,
		encoding: null,

This file has been truncated. show original

github.com/adevk/generate-text-image-node

nodes/GenerateImage/GenerateImage.node.ts

main

/* eslint-disable n8n-nodes-base/node-param-options-type-unsorted-items */
/* eslint-disable n8n-nodes-base/node-class-description-outputs-wrong */
/* eslint-disable n8n-nodes-base/node-class-description-inputs-wrong-regular-node */
import {
	IDataObject,
	IExecuteFunctions,
	INodeExecutionData,
	INodeType,
	INodeTypeDescription,
	NodeConnectionType,
	NodeApiError,
	JsonObject,
} from 'n8n-workflow';
import { apiRequest } from './Functions';

export class GenerateImage implements INodeType {
	description: INodeTypeDescription = {
		// Basic node details will go here
		displayName: 'Generate Image',
		// eslint-disable-next-line n8n-nodes-base/node-class-description-name-miscased

This file has been truncated. show original

system · June 7, 2025, 5:04pm

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.