✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?