NuxtImage not working as expected with Sanity
If I set the provider to sanity in the image config then for usage such as:
it outputs the following, which has incorrect src urls but correct ?w additions to match the screen sizes
Whereas without a provider I get:
Correct URLs but no w? attribute.
Any thoughts?
3 Replies
Hi @rich. 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 knowledge sources, here’s what’s happening:
When you set the Nuxt Image provider to Sanity and use a direct Sanity asset URL (e.g., item.image.asset.url) as the src, Nuxt Image expects a Sanity image "source" (the image reference object or its ID), not the full URL. The Sanity provider in Nuxt Image is designed to construct the correct image URLs and apply modifiers (like width, format, etc.) itself. If you pass the full URL, the provider cannot parse it correctly, resulting in malformed URLs like:
Instead, you should pass the Sanity image reference (usually item.image.asset._ref or the full image object) to the src prop, not the direct URL. The provider will then generate the correct URLs and append the appropriate query parameters for optimization and responsive sizes.
What to do:
- Pass the image reference (not the full URL) to <NuxtImg src=""> when using the Sanity provider.
- If you only have the URL, either:
- Don’t set the provider to sanity (let Nuxt Image treat it as a remote image), or
- Extract the image reference from your Sanity data and use that.
Example:
Or, if you have the full image object:
This approach allows the Sanity provider to generate the correct URLs and apply all modifiers as expected. For more details on the Sanity provider and its usage, see the official documentation: Sanity Provider Integration.
Summary:
- Do not use the direct asset URL as src with the Sanity provider. - Use the image reference or object so the provider can generate correct URLs and modifiers. If you need to use the direct URL, do not set the provider to sanity, and Nuxt Image will treat it as a remote image, but you’ll lose some of the provider-specific optimizations and modifiers. Let me know if you need more details on extracting the image reference from your Sanity data!
Sanity Provider Integration ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
- Do not use the direct asset URL as src with the Sanity provider. - Use the image reference or object so the provider can generate correct URLs and modifiers. If you need to use the direct URL, do not set the provider to sanity, and Nuxt Image will treat it as a remote image, but you’ll lose some of the provider-specific optimizations and modifiers. Let me know if you need more details on extracting the image reference from your Sanity data!
Sanity Provider Integration ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@705371687679688774> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
This solved the issue! Thanks. In my groq I had the following, so I added an assetRef key/value and seemed to work...
Why does it show 1w, 2w instead of 1x, 2x as w=2 is wrong 🙂
Feel like this might be a bug @danielroe