Display uploaded image (using replit object storage)

Agent & Assistant
1

I’ve uploaded an image using replit object storage. I see the image in the object storage bucket on the server.

I have (what I think) is the accurate URL of the image, but I receive the error:

Anonymous caller does not have storage.objects.get access to the Google Cloud Storage object. Permission ‘storage.objects.get’ denied on resource (or it may not exist).

The URL i’m using is something like this: https://storage.googleapis.com/replit-objstore-0416681d-7baa-45ca-a0de-115f272e06d1/ec3ca965-3fb6-4e39-bc0e-3b2c4e1359ba.jpg

I believe that replit set buckets to public on default, but possibly that needs set up somehow? I have not found anything in Replit documentation on this.

How do I access this image to show it on a page <img src"bla.jpg">

1 Like
2

Welcome @kevin608!

When I worked with object storage it seemed like Agent had success putting the bucket behind an API.

Here is a live example from ConvoPath.

Chatbot avatar:

image
image467×682 30.4 KB

Link to the actual avatar that is displayed:
“https://app.convopath.com/api/avatars/avatars/chatbot-cj0wxnXJDgj2W42H/avatar-1751380360632.png?t=1751380370470”

3

@mark did you use streaming then to send the image? I’m unclear then on how the image is getting served.

4

Let me check into this… bbl

5

@kevin608 I asked Agent and got a response for you that I hope helps! Perhaps your Agent in your app might understand this? It does make sense. Essentially the app needs to display the object storage items through the app, not directly through the Google object link.

Replit Agent’s Pro Tip for Object Storage

Quick Implementation Guide for Them

They need to create an API route that:

  1. Takes a file identifier as a parameter
  2. Validates the request is for an allowed file
  3. Uses the Replit Object Storage SDK to download the file
  4. Serves it with proper headers (content-type, CORS, caching)

The key insight is that Replit Object Storage is meant to be accessed through your application’s API, not directly through public URLs. This is actually a more secure and flexible approach than direct file serving.

6

Would you mind sharing your code that is used to get the image and serve it in the API? I’ve spent hours with agent, an no luck so far to get it to display.

Thanks so much for your help @mark!

7

@kevin608 leery of sharing the code here for security, sorry, and it would likely be different than your exact use case, but after taking another look, what I can confirm here is that my app is using the ‘Object Storage JavaScript SDK’ outlined in the official Replit docs.

One thing I do recall is pasting the Replit doc URL (above) for this and other object storage related docs into Agent and asking it to implement the image to be visible in the app and publicly, since I needed the chatbot avatars to be publicly visible.

image
image360×196 8.97 KB

Would love to see what you’re working on, if not comfortable posting here feel welcome to send a message.

I hope this helps get you in the right direction, I do recall it being a bit of a bear to get right.