Nuxt OG Image works locally but not deployed
Hey, I can see my og image locally in the dev tools, but it is not doing it when deploying.
Is it because it doesnt put the image in
public folder but instead https://x.vercel.app/__og-image__/image/stores/x-test-store-3733/og.png
I am currently trying a local build & serve7 Replies
Hi @kb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I don't have enough specific details about Nuxt OG Image functionality to directly address your issue. However, I can provide some insights related to image handling in Nuxt that might be relevant to your problem:
1. For static assets that need to be served as-is, Nuxt recommends using the
public/ directory. Files in this directory are served at the root and are not modified during the build process Nuxt Public Directory (https://nuxt.com/docs/guide/directory-structure/public).
2. If you're using nuxt generate to create a static site, Nuxt Image will optimize and save your images locally when your site is generated, and deploy them alongside your generated pages Nuxt Image Static Generation (https://image.nuxt.com/advanced/static-images).
3. For external URLs or images not in the public/ directory, you may need to whitelist the domains in your Nuxt configuration Nuxt Image Domains (https://image.nuxt.com/providers/aws-amplify#domains).
4. If you're using server-side rendering (ssr: true), Nuxt Image should be able to optimize your images during the static generation process. However, if you've disabled SSR (ssr: false), you might need to pre-render your images using the nitro.prerender.routes option Nuxt Image Static Prerendering (https://image.nuxt.com/advanced/static-images).
Given that your OG image is being generated at a path like <https://x.app/__og-image__/image/stores/x-test-store-3733/og.png,> it seems that it might be dynamically generated. In this case, you may need to ensure that your deployment environment is set up to handle this dynamic generation correctly.
To troubleshoot further, you might want to:
1. Check your Nuxt configuration to ensure image handling is set up correctly for your production environment.
2. Verify that the necessary image processing dependencies are available in your production environment.
3. Check your deployment logs for any errors related to image processing or file serving.
If you continue to face issues, you might need to provide more details about your specific setup, including your Nuxt configuration, deployment method, and any image-related modules you're using.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@310160452221140996> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
it does work if i serve it locally, just not on vercel?
a minimal reproduction would be helpful but if it works locally with a prod build but not on vercel, it might be a module issue.
Though I've seen og image generation with this module on vercel w/o issues
It seems to be a issue with the new version of nuxt SEO module it self, and the updated docs are not clear tbh.
You can roll back to the previous mayor version and it will work.
then a repro would be good! (cc @harlan just FYI)
ah - i dont actually have the main module in my dependencies - guess i need a resolution to lock it at a required version or something