gatsbyjs/gatsby · error

[gatsby-plugin-image] All art-directed images passed to must

Error message

[gatsby-plugin-image] All art-directed images passed to must have a value set for `media`. Skipping.

What it means

Dev warning from withArtDirection: an entry in the artDirected array lacks a `media` prop, so without a media query it can never match a viewport — the entry is skipped and omitted from the generated <source> elements.

Source

Thrown at packages/gatsby-plugin-image/src/components/hooks.ts:364

  artDirected: Array<IArtDirectedImage>
): IGatsbyImageData {
  const { images, placeholder, ...props } = defaultImage
  const output: IGatsbyImageData = {
    ...props,
    images: {
      ...images,
      sources: [],
    },
    placeholder: placeholder && {
      ...placeholder,
      sources: [],
    },
  }

  artDirected.forEach(({ media, image }) => {
    if (!media) {
      if (process.env.NODE_ENV === `development`) {
        console.warn(
          "[gatsby-plugin-image] All art-directed images passed to must have a value set for `media`. Skipping."
        )
      }
      return
    }

    if (
      image.layout !== defaultImage.layout &&
      process.env.NODE_ENV === `development`
    ) {
      console.warn(
        `[gatsby-plugin-image] Mismatched image layout: expected "${defaultImage.layout}" but received "${image.layout}". All art-directed images use the same layout as the default image`
      )
    }

    output.images.sources.push(
      ...image.images.sources.map(source => {
        return { ...source, media }

View on GitHub (pinned to e85d62f177)

Solutions

1. Set a media query string on every art-directed image, e.g. media="(min-width: 800px)"

When it happens

Trigger: Thrown at packages/gatsby-plugin-image/src/components/hooks.ts:364 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of gatsbyjs/gatsby@e85d62f177 (2026-08-26). Data as JSON: /api/errors/be7cbfd27b805a72. Report an issue: GitHub.