Get help on Discord

Discrepancy between local and production image URLs with @sanity/image-url

23 replies
Last updated: Jan 7, 2022
having a discrepancy between local and production regarding 
@sanity/image-url
. Works as expected locally, but when published to Gatsby Cloud, my image URLs have 
/undefined/undefined/
where the 
projectId
and 
dataset
should be.
here’s how i have things coded

imageUrl.js

import config from '../../config'
import imageUrlBuilder from '@sanity/image-url'

const builder = imageUrlBuilder(config.source)

export function urlFor(incoming) {
  return builder.image(incoming)
}
config.js

const Config = {
  source: {
    projectId: process.env.PROJECT_ID,
    dataset: process.env.DATASET,
    apiVersion: process.env.API_VERSION,
  },
}

module.exports = Config
component where image should output

article.featuredImage && <img src={urlFor(article.featuredImage).width(300).height(500).url()}
any ideas why this doesn’t work on Gatsby Cloud?
AI Update

The issue you're experiencing is almost certainly related to how environment variables are configured in Gatsby Cloud versus your local environment. The undefined/undefined in your image URLs indicates that process.env.PROJECT_ID and process.env.DATASET aren't being read correctly in production.

Here are the key things to check and fix:

1. Environment Variable Naming in Gatsby

Gatsby has specific requirements for environment variables. Variables that need to be available in browser-side code (which includes your image URL builder) must be prefixed with GATSBY_.

In Gatsby Cloud, update your environment variables to:

  • GATSBY_PROJECT_ID instead of PROJECT_ID
  • GATSBY_DATASET instead of DATASET
  • GATSBY_API_VERSION instead of API_VERSION

Then update your config.js:

const Config = {
  source: {
    projectId: process.env.GATSBY_PROJECT_ID,
    dataset: process.env.GATSBY_DATASET,
    apiVersion: process.env.GATSBY_API_VERSION,
  },
}

module.exports = Config

2. Verify Variables are Set in Gatsby Cloud

Make sure you've actually added these environment variables in your Gatsby Cloud project settings. Go to your site settings → Environment Variables and add them there with the correct values.

3. Why it Works Locally

Locally, you might be using a .env file or have these variables set in your shell environment, which is why it works. But Gatsby Cloud needs them explicitly configured in its dashboard.

4. Rebuild After Adding Variables

After adding or changing environment variables in Gatsby Cloud, you need to trigger a new build for them to take effect.

Alternative Approach

If you prefer to hardcode non-sensitive values (project ID and dataset are public information in Sanity), you could also just set them directly:

const Config = {
  source: {
    projectId: 'your-project-id',
    dataset: 'production',
    apiVersion: '2023-05-03',
  },
}

This is actually a common pattern since these values aren't secrets - they're already exposed in your frontend code and API requests anyway.

The GATSBY_ prefix requirement is the most likely culprit here. Make that change and redeploy, and your images should work correctly in production.

even if its the same variables used elsewhere?
or i suppose not, since they are only used at build time
whats the best way to expose them? or how do i make 
@sanity/image-url
work in production?
This link says they need to be prefaced with 
GATSBY_
. You could try that, or you could try configuring them per these instructions .
i’ll try prefacing them … the second link is basically what i am doing now
user A
- ok that worked! but now, oddly, my local is broken with the 
/undefined/undefined
user A
- ok that worked! but now, oddly, my local is broken with the 
/undefined/undefined
When you added the preface, where did you update? There’ll be Gatsby Cloud settings, your code, and your .env.local file.
yep, all 3 of those
although my env is name 
.env.development
but that seemed to work previously
although my env is name 
.env.development
but that seemed to work previously
And the local 
gatsby develop
process was killed and restarted since making the env changes?
Anything in 
gatsby-config.js
pointing at the old vars?
Anything in 
gatsby-config.js
pointing at the old vars?
ahh, nope
lol
The process?
yeah, i didn’t kill and restart develop
doing that now
Gets me all the time.
same
yep, that resolved it… sorry to bother
Not a bother at all! Glad it’s working. 🎉

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?