33 Replies
Hey! I don't think you need Cloudinary if you are storing raw images in supabase. Check this page for details
https://supabase.com/docs/guides/storage/image-transformations
Here is an example from that link
Storage Image Transformations | Supabase Docs
Transform images with Storage
does it work on free plan??
Oh my bad, no looks like it is not a free solution sadly.
i was wondering if i could get some free solution as cloudinary takes supabase url but does not perform transformation
Looking more into your code, what output are you getting?
let me show you how it displays
this one
Can you try this out?
Just change the URL with your supabase public url
Well, can you confirm if your created supabase public url works? and can you check if your posts object is pushing out some value or undefined?
it renders the images but with different heights
Did you try this out?
@Revaycolizer
here in console
let me try it but where specifically
fixed it but some errors
Property 'image' does not exist on type 'CloudinaryImage'.
https://cloudinary.com/blog/on_the_fly_image_manipulations_secured_with_signed_urls#strict_fetch_urls
Maybe this could help.
Nadav Soferman
Cloudinary Blog
Secure Image Transformations With Signed URLs
Learn how to securely sign Cloudinary image-URLs with a simple parameter to prevent arbitrary access or modification of images.
yes, it looks like you cannot use it on react. It could be for NodeJS. I did some research but wasnt able to find anything useful except that link
And that too is for NodeJS. So if you are trying to do that in ReactJS it will not work I think
thanks let me see what can be done then i will contact you
Tell me this
This piece of code is in reactjs right?
yes exactly in reactjs specifically nextjs framework
oh I see, so you are writing your APIs in the apis directory in Node right?
just in app directory and not apis directory
If nothing works after going through the URL I sent and trying it out. What you can do is create an API which gets the link in request, use the nodejs specific cloudinary function as shown in the URL, transform the image and send the public url created by cloudinary as a response.
That should work, you might need to change some settings in cloudinary to work with different domains sending image according to your needs
seems a lot of things should be done then let me give it a try
Well, do that if nothing else works.
fine then I will come back for feedback
Sure, goodluck!
thanks just few minutes I will be done
Also I don't know for sure, there could be better solutions and mine might not even work. So please don't get mad if it doesnt 😱
worry out at most you did your best
used nodejs sdk but getting this error Module not found: Can't resolve 'fs'
hmmm, I feel like you might not be creating your apis properly. Have you made APIs before in your project?
nope
Okay so try creating one simple api then calling it on thunderclient or postman just to see if its working in your next project. I have not worked with node that much so I cant be of much help there
Learn | Next.js
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.
This should help, you can skip step 2 I believe but give it a read in case I missed something.
You should learn more about APIs in nextjs. You will be needing them to create safe and scalable applications. There will be times you need to perform some action which requies some key so its best to use APIs for that as if you do that same logic on the front end it could expose your API keys and malicious actors can use it just by accessing your frontend
i will