Skip to content
✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now
Get help on Slack

How to Load an Image Using the Original File Name

5 replies
Last updated: Oct 28, 2021
I am pretty sure that I've seen this somewhere, but I can't find it. Is there a way to load an image using its original file name (through the URL)?
Oct 27, 2021, 10:05 PM
Hey Christopher! To clarify, are you talking about using the original filename when using the imageUrl builder?
Oct 27, 2021, 10:47 PM
Not quite. I need to feed it into GatsbyImage, so I have:

        const gatsbyImageData = imageUrlsAndFilesNames[domNode.attribs.src].gatsbyImageData
        return (
          <GatsbyImage image={gatsbyImageData} className={domNode.attribs.class} alt={domNode.attribs.alt} />
        )
Oct 27, 2021, 10:49 PM
I had to hit the graphQL for all images (3500+) build an array, then filter through the results just to pull out one, but there must be an easier way.
Oct 27, 2021, 10:50 PM
Ah, I see what you mean. I'll play around with it and see if I can come up with a better solution.
Oct 28, 2021, 6:09 PM
Actually, I solved it another way, but I was wondering if we can eventually do that.... use the original filename as a parameter. Thanks for your help
user M
!
Oct 28, 2021, 6:10 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.

Get started for freeExplore the demo

Was this answer helpful?