Nuxt OgImage Error on Cloudflare Workers
I'm using a custom component where I have an
img tag, and it can't load the image inside it even though the image file is in the public directory :\
in my OgImage component (app/components/OgImage/Default.vue) I'm simply calling the image like i do in a normal component:
this is how I'm using the component
It is worth noting that the deployment worked fine when I used Cloudflare Pages, but when I switched to workers it gives me the error above.4 Replies
Hi @AerodynamicPotato. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
It appears that your image loads correctly on Cloudflare Pages but fails with an "Unsupported image type: unknown" error when running on Cloudflare Workers, even though the image is in the public directory and referenced as <img src="/images/og-image.png" />.
Based on the knowledge sources, here are some key points and possible causes:
1. Serving Static Assets from public/
Images placed in the public/ directory should be accessible at the root of your deployed site (e.g., /images/og-image.png). This is the standard way to serve static assets in Nuxt 3, and your usage matches the documented approach. If this works on Cloudflare Pages, your setup is likely correct in this regard Nuxt public directory docs. 2. Cloudflare Workers and Image Handling
The error "Unsupported image type: unknown" suggests that the runtime (Cloudflare Workers) cannot determine the image type. This could be due to: - The image file not being served with the correct Content-Type header. - The image file not being found or accessible at the expected path. - A limitation or misconfiguration in how Workers serve static assets compared to Pages. 3. Nuxt OgImage and WASM/Resvg Issues
There are known issues with the og-image module and certain environments, especially when WASM dependencies (like resvg) are involved. In some cases, disabling resvg in the ogImage runtime config resolved build/runtime errors, though your error message is about image type, not WASM loading GitHub issue: Build in CI breaks with 3.16. 4. Differences Between Pages and Workers
Cloudflare Pages and Workers have different ways of serving static files. Pages automatically serves files from the output/public directory, while Workers may require explicit configuration to serve static assets. If the image is not being served with the correct headers or is not accessible, this could cause the error you're seeing. Suggestions: - Double-check that your Worker is configured to serve static assets from the public/ directory, and that /images/og-image.png is accessible at the expected URL. - Ensure that the Content-Type header for the image is set correctly (e.g., image/png). - If you are using the og-image module and it tries to process the image, check if there are any WASM or runtime compatibility issues on Workers, and consider disabling resvg as a test GitHub issue: Build in CI breaks with 3.16. - Try accessing the image URL directly in your browser or via curl to see if it returns the image with the correct headers. Summary:
The knowledge sources do not provide a direct solution for this specific error on Cloudflare Workers, but they highlight that static assets in public/ should be accessible, and that differences in how Cloudflare Workers serve files (especially headers and file access) are likely the cause. Double-check your Worker configuration and static asset serving. If you continue to have issues, you may need to consult Cloudflare Workers documentation or Nuxt deployment guides specific to Workers, as the problem seems to be environment-specific rather than a Nuxt misconfiguration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Images placed in the public/ directory should be accessible at the root of your deployed site (e.g., /images/og-image.png). This is the standard way to serve static assets in Nuxt 3, and your usage matches the documented approach. If this works on Cloudflare Pages, your setup is likely correct in this regard Nuxt public directory docs. 2. Cloudflare Workers and Image Handling
The error "Unsupported image type: unknown" suggests that the runtime (Cloudflare Workers) cannot determine the image type. This could be due to: - The image file not being served with the correct Content-Type header. - The image file not being found or accessible at the expected path. - A limitation or misconfiguration in how Workers serve static assets compared to Pages. 3. Nuxt OgImage and WASM/Resvg Issues
There are known issues with the og-image module and certain environments, especially when WASM dependencies (like resvg) are involved. In some cases, disabling resvg in the ogImage runtime config resolved build/runtime errors, though your error message is about image type, not WASM loading GitHub issue: Build in CI breaks with 3.16. 4. Differences Between Pages and Workers
Cloudflare Pages and Workers have different ways of serving static files. Pages automatically serves files from the output/public directory, while Workers may require explicit configuration to serve static assets. If the image is not being served with the correct headers or is not accessible, this could cause the error you're seeing. Suggestions: - Double-check that your Worker is configured to serve static assets from the public/ directory, and that /images/og-image.png is accessible at the expected URL. - Ensure that the Content-Type header for the image is set correctly (e.g., image/png). - If you are using the og-image module and it tries to process the image, check if there are any WASM or runtime compatibility issues on Workers, and consider disabling resvg as a test GitHub issue: Build in CI breaks with 3.16. - Try accessing the image URL directly in your browser or via curl to see if it returns the image with the correct headers. Summary:
The knowledge sources do not provide a direct solution for this specific error on Cloudflare Workers, but they highlight that static assets in public/ should be accessible, and that differences in how Cloudflare Workers serve files (especially headers and file access) are likely the cause. Double-check your Worker configuration and static asset serving. If you continue to have issues, you may need to consult Cloudflare Workers documentation or Nuxt deployment guides specific to Workers, as the problem seems to be environment-specific rather than a Nuxt misconfiguration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@336887743366037504> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
this is most likely a cloudflare worker issue, basically within a worker you have a very limited number of sub-fetch requests you can make
which makes og image quite brittle
i'd recommend inlining the image if possible (as a workaround)
this can likely be fixed in the future using a build plugin
For the time being, I switched to Cloudflare Pages
I will try inlining the images as a test, thank you 😄