timecatcher timecatcher - 10 months ago 53
Javascript Question

Google cloud storage image public link to img src

Hi I have looked into related questions, but have been unsuccessful in finding an answer. I would like to serve public links from google cloud storage on my website, but they are only available as download links. I am unable to place them as img src to load them. I cannot download the image async from my webpage js because of CORS. Is there a workaround? I was wondering whether I could asynchronously define them as download links initially and force onclick to download them then use file reader to get the blob to use as img src.

UPDATE : I figured out that there was a Chromium issue. I used Firefox with CORS_Everywhere and the requests works. Once my website is live, will I have the same issue for the images? OR is it that CORS just doesn't accept localhost? OR is it browser dependent?


Answer Source

I'm not entirely sure what you're trying to do. It sounds like you'd like to display images in an <img> tag where the source is in GCS. You shouldn't need any sort of CORS policy or Javascript trickery for that, so I may misunderstand your question.

To include GCS images on a website, make sure the image is publicly visible, then just include an image tag like this: <img src="https://storage.googleapis.com/BUCKET_NAME/OBJECT_NAME" />.

Edit with answer from the comments:

If you upload an object without specifying a Content-Type, GCS defaults to a generic "application/octet-stream." Web browsers generally default to saving application/octet-stream responses. Make sure JPEG images have the Content-Type "image/jpeg" if you want to serve them via the web.