Correct way to query GraphQL for product image src

Technical Q&A

Topic summary

A developer encountered a deprecation issue when querying Shopify’s GraphQL API for product images. The originalSrc field was deprecated, and replacing it with src resulted in syntax errors.

Solution provided:

  • As of late 2023, the images field itself is deprecated
  • The current approach uses the media field instead
  • Query structure:
    • Use media(first:10) instead of images(first:10)
    • Access image URLs through ... on MediaImage { image { url } }
    • This filters for images only, excluding videos and other media types

The solution was confirmed working by another user. The updated query returns image URLs using the url field within the MediaImage fragment.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Up until today I have been querying the Shopify GraphQL API with “originalSrc” in order to get product image sources. Now I see “originalSrc” is deprecated and that I should use “src” instead. My question is: how would this query with “src” look?

I have attempted to replace “originalSrc” with “src”, which just returns a syntax error and I have not been able to find the solution anywhere online.

Here is my current (and deprecated) request

{
            product(id: "gid://shopify/Product/6786957082804") {
                id
            images(first:10) {
            pageInfo {
                hasNextPage
                hasPreviousPage
                }
                edges {
                	cursor
                	node {
                		originalSrc
                		id
                    
                	}
                }
            }  
            }
        }

Thanks in advance!

3 Likes
2

For future readers…

With the newest API updates, images is now deprecated. (Late 2023)

The new way to get image URLs is this:

{
  product(id: "gid://shopify/Product/6786957082804") {
    id
    media(first:10) {
      edges {
        node {
          ... on MediaImage {
            image {
              url
            }
          }
        }
      }  
    }
  }
}

This example will retrieve the URLs of all images, not including videos or other media types.

1 Like
3

This worked for me. Thanks!