No CMS images on Vercel

maybe vercel's URL structure has changed?

try turning off the image optimizer on image component, publish, sync or sync with preview flag

it may have never worked with optimizer on, not sure

I did try turning off the optimizer. I will publish again later All are previews. Have a not published to production yet

turning off optimize does use the direct url and works.

related auestion about the optimize. when the website is called does the app call the image from source then optimize it on every call? would images benefit from being uploaded straight to a cdn?

These type optimizers have a caching cdn

Something is either wrong with how we use vercel's. Maybe it doesn't support external urls, pls check their docs or alternatively ask their support

Ok I tried publishing vanilla in a ec2 I have and also cant show images

Im using a nginx proxy to talk to it on https://dev.cashi.com.mx/

i notice that while vercel tries to call /image?url=[imgSrc]. the run dev just tries to paste the source url inside the assests dir (which inside inly has the directly uploaded images)

On topic, how can i use an image in assets in the expression editor? I want to show one as default of no srcImg is found in cms:

post.featuredImage.node.sourceUrl || "urlofassetimagehere"

Hey, I had the same issue yesterday as you originally described, but with images from Google Drive, and it turned out my url structure was wrong as it didn’t directly access the image and therefore couldn’t be embedded that way. Your image url seems good but I wanted to throw this in in case it could help.

The link structure before was: https://drive.google.com/file/d/1lP-mhG2dwaI0HHh6CtEIvj_cCFx67P_A/view?usp=sharing That’s also the only one you get from Google Drive.

The right one for really directly accessing the image is: https://lh3.googleusercontent.com/d/1lP-mhG2dwaI0HHh6CtEIvj_cCFx67P_A with simply the image-ID appended, which isn’t generated anywhere so I now have each URL change to the right one with some code and it works.

Dunno if this has anything to do with your issue, but I appreciate your ff profile pic.

To your other question, I’m not sure if I understand correctly, but loading an image through its URL dynamically is not different from loading any other specific data point, if you load the URL as text in the format you showed on an image component, it loads it.

Or do you mean that it loads a specific image from the source IF it doesn’t find any other one? If yes I’d be highly interested in the answer as this is very similar to an issue I have rn too :D

On the first issue: turning off optimization has allowed me to show the iamges, the url structure is the wordpress structure though I am moving them to a cdn, but I will try with optimization on agian alter, it didnt work in vercel nor in a vanilla deploy. Ill keep ya posted.

The seond issue what I mean is loading an image from our assets if the one from the dynamic source is nto found. But yeah you made me realzia to check the url... which is just /assets/{name of image}. duh. Thanks. And yeah, since I first used discord for playing FF the avatar and name just stuck there... lol

I tried again with optimize off and I comapred this with an imamge I uplaoded and noticed the problem

any uplaoded image will look like this:

src="/_vercel/image?url=%2Fassets%2FCASHI_LOGO_ZyqLMtIglv_syA090t3pg.svg&w=1920&q=80"

this makes sense, this image was uploaded in webstudio therefore its in /assets/{url}

the uploaded image url looks like this:

src="/_vercel/image?url=%2Fassets%2Fhttps%3A%2F%2Fb3802281.smushcdn.com%2F3802281%2Fwp-content%2Fuploads%2F2024%2F10%2FBANNER-SITIO-325X310-14-1.jpg%3Flossy%3D2%26strip%3D1%26webp%3D1&w=1080&q=80"

its putting the url value like /assets/https://{rest of image url}

I guess when building the code is just sending the varaible and concatenating with the assets dir where it probably should jsut take the whole url starting in https

Does vercel image optimizer take a url?

Makes sense, so did that solve the issue now?

Just FYI :
I had similar issue with Netlify. (Images from Hygraph )
I removed image optimisation, built again and post cover images appeared. But images inside the post still didn't (which were same as the cover but i think with change of URL they didn't apper)
i'll check again today if there's a solve for this

what do you mean?

Url, starting with http, can you pass it to vercel image optimizer?

If not, that would be the problem

the problem is its inserting the subdir assests before the https

i dont know how to test it otherwise

I am asking if vercel let's you provide a remote image url to their image resizer in general

the ones from assests work flawlessly

i dont know how to test sending another one since the src urls are genereated automatically in webstudio

I think that whatever generates the /vercel/img=? code needs a validation that if it includes https it should not add the assets folder to the string

also a remidner, also if I deploy as Vanilla in a server the same thing happens

Ok i think i get what you mean, Im opening both an internal optimzied image and the external one

the internal one result is this

This works, and this image is indeed inside the assets folder since it was uplaoded in webstudio

The external one generates this url

This is the result

however... if I manually remove assets...

I get this

so no, I cant seem to feed an external iamge to the optimzier

which is additional to the adding of assets to the url

FOrreference:onthe publishedsitein wstd.io the url of the uploaded iamge is:

/cgi/image/sams-cashi_8s98kAZ4b93QKDMnFRcz2.jpg?width=1920&quality=80&format=auto

the external one looks like

/cgi/image/https%3A//b3806228.smushcdn.com/3806228/wp-content/uploads/2024/10/SAMS-EFI.jpg%3Flossy%3D2%26strip%3D1%26webp%3D1?width=1080&quality=80&format=auto

(no assets dir in either) in wtsd.io the optimzier works perfectly

so unless you talk to vercel support and they tell you its possible, it means there is nothing we can do

since this is exactly what you are trying to achieve, using remote image url and optimizing it using vercel

we are doing this for you in our cloud

otheriwse keep images without opimitzations

their AI support answers with:

It's important to note that while Next.js can optimize images from external sources, there are some limitations:

The external image URL must be accessible and not require authentication.
You need to specify all the domains you'll be loading images from in the domains array.
There might be legal or copyright considerations when using external images, so always ensure you have the right to use and optimize the images you're working with.

it puts that to configure domains you use this code
const nextConfig = {
images: {
domains: ['images.unsplash.com'],
},
}

module.exports = nextConfig

but I honestly don't know where to configure that to add the cdn and backend domain

i guess its optimziation off for iamges in the end

We have vercel.json in the root which can have domains specified.

Ok this worked, I see now the image if I provide the fixed url

so the only thing left is preventing the src to have the assets dir concatenated before the http url

and that I do belive is part of your code? maybe in https://github.com/webstudio-is/webstudio/blob/main/packages/image/src/image-loaders.ts

Created an issue
https://github.com/webstudio-is/webstudio/issues/4381

awesome. Since publishing to vercel already requires to be using the cli and is kind of already an "advanced" operation I think that just documenting adding the domains in vercel.json in the guide in your documentation should be enough for the moment to avoid unnecesary features for the moment

The cli will override vercel.json each time you generate app

ugh that does sound bothersome

Though you can create custom template (just a folder with vercel.json) which will override on top of builtin template

The feature is already there

oh well

like this webstudio build --template vercel --template ./overrides

overrides/vercel.json