zeusent•3w ago

Return actual image data as workflow response

I am in need of a workflow that is able to return actual images when called via a HTTPS call. I can't figure out how I can return an actual image as the response of such a workflow. Is there anyone that can point me in the right direction?

8 Replies

AI Support•3w ago

Processing...

🤖 Engaging cognitive circuits. 💡 this might take a couple of minutes... beep boop

AI Support•3w ago

🤖 AI Response

To return an actual image (not just a URL) in a BuildShip workflow, configure your Return Node with the correct Content-Type header (such as image/jpeg or image/png) and set the response body to the binary data of the image, either by retrieving it from BuildShip Storage or decoding a Base64 string from an image generation node. This approach ensures the API response delivers the image directly, not just a link, and is compatible with both stored and dynamically generated images. If you need to generate the image (e.g., using AI nodes like Flux), ensure you decode the Base64 output before returning it as binary data with the appropriate headers. 🔗 References: 1. https://buildship.com/blog/object-detection-with-buildship-s-google-vision-api-template 2. https://buildship.com/blog/flux-ai-image-generation 3. https://buildship.com/blog/build-a-multimodal-ai-chatbot 4. https://www.youtube.com/watch?v=zW2boQQvLM8 5. https://www.youtube.com/watch?v=QHd2p0LVK1o

BuildShip AI Support

zeusentOP•3w ago

How do I set the content-type header to image/jpeg though? Can't seem to figure that one out

Gaurav Chadha•3w ago

Hi @zeusent thanks for sharing this via support as well - https://templates.buildship.com/template/tool/n9UdoUBtGmmh/event-image-for-event you can use this template it will return an image URL which you can render on your frontend also on buildship while testing you can see the preview of the image

BuildShip Community

Event Image for Event | Buildship Community

Generates a custom event poster image and provides a shareable URL. Accepts event title, date, description, and an optional style reference as input, then crafts a detailed image prompt, uses OpenAI’s image model to create the poster, uploads it to cloud storage, and returns the image URL.

zeusentOP•3w ago

What I’m looking for is for a workflow that’s able to return the actual image so that I won’t have to make 2 requests to be able to load an image on my front end 🤔

Gaurav Chadha•3w ago

loading an image won't require another api call you can simply get the url form the api and render like this in forntend:

<div className="mt-4">
          <img
            src={imageUrl}
            alt="Fetched from API"
            className="max-w-full h-auto rounded-lg shadow-lg"
            onError={() => setError('Failed to load image')}
          />

<div className="mt-4">
          <img
            src={imageUrl}
            alt="Fetched from API"
            className="max-w-full h-auto rounded-lg shadow-lg"
            onError={() => setError('Failed to load image')}
          />

where the setImage will have the imageURL setImageUrl(data.url), use useState const [imageUrl, setImageUrl] = useState(''); on your frontend you can use AI to write the frontend code to render image from api call output url

zeusentOP•3w ago

I’m writing an iOS app in Swift. So I need to make a request to grab the URL and then another to load the image.

Gaurav Chadha•3w ago

then use a base64 version, you can return the base64 image in json

Return actual image data as workflow response

Did you find this page helpful?