Help with React-Router-7 and Vercel setup #786
-
|
I'm trying to use I came across Netlify's article, where a local image is processed in a Remix project. However, several discussions suggest that local images can't be used with I also configured my project with a Ultimately, I just want to optimize images for my MDX blog, which I plan to host on Vercel. Current Behavior
Working ConfigurationWhen I remove the import image from "./test.jpg";
<html>
<body className="bg-background text-foreground flex min-h-dvh flex-col">
<Image height={120} aspectRatio={16 / 9} src={image} />
</body>
</html>Questions
Any guidance would be greatly appreciated, as the current documentation doesn't seem to cover this specific use case. Thanks! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
Ah, yes the problem is that unlike Netlify, Vercel hard-codes the allowed widths for images, and if you request a different size then it gives an error. It makes things hard for libraries like Unpic. There are a few ways to work around this, none of them ideal. One is to manually set allowed widths in your vercel.json, but that does mean you need to know what the sizes are. The other is to use the |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the fast response @ascorbic! For example, with this setup: <Image
src={screenshot}
layout="constrained"
cdn="vercel"
width={1280}
aspectRatio={16 / 9}
/>The generated URLs include sizes like: So I added all the standard breakpoints Also, what’s the best way to display images locally, because these images aren't shown locally when I pass in a value to <Image
src={screenshot}
layout="constrained"
{...(import.meta.env.PROD ? { cdn: "vercel" } : {})}
width={1920}
aspectRatio={16 / 9}
/>Would you suggest a different approach? |
Beta Was this translation helpful? Give feedback.
-
|
Yes to both! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks to both! It might be nice to have this Vercel quirk documented somewhere so people (me included :P) don't have to wonder if they're doing something wrong. |
Beta Was this translation helpful? Give feedback.
Ah, yes the problem is that unlike Netlify, Vercel hard-codes the allowed widths for images, and if you request a different size then it gives an error. It makes things hard for libraries like Unpic. There are a few ways to work around this, none of them ideal. One is to manually set allowed widths in your vercel.json, but that does mean you need to know what the sizes are. The other is to use the
breakpointsprop to pass in the list of allowed widths, but that does mean you lose the benefit of automatic sizing.