Prompt Title: GatsbyJS Image Swap.

Для подмены изображения на странице в GatsbyJS можно использовать компонент StaticImage.

1. Сначала нужно получить значение параметра bn из URL. Для этого можно использовать useLocation из react-router-dom. Пример:

jsxCopy code
import { useLocation } from "react-router-dom"

function MyComponent() {
  const location = useLocation()
  const bn = new URLSearchParams(location.search).get("bn")

  return (
    // ...
  )
}

2. Затем, используя полученное значение bn, можно подставить нужное изображение в компонент StaticImage. Пример:

jsxCopy code
import { StaticImage } from "gatsby-plugin-image"

function MyComponent() {
  const location = useLocation()
  const bn = new URLSearchParams(location.search).get("bn")

  let imageSrc
  if (bn === "gagarina") {
    imageSrc = "/images/gagarina-banner.jpg"
  } else if (bn === "another-banner") {
    imageSrc = "/images/another-banner.jpg"
  } else {
    imageSrc = "/images/default-banner.jpg"
  }

  return (
    <StaticImage src={imageSrc} alt="Banner" />
  )
}

3. Чтобы изображение не мерцало при загрузке, можно использовать атрибут loading="eager". Пример:

jsxCopy code
import { StaticImage } from "gatsby-plugin-image"

function MyComponent() {
  const location = useLocation()
  const bn = new URLSearchParams(location.search).get("bn")

  let imageSrc
  if (bn === "gagarina") {
    imageSrc = "/images/gagarina-banner.jpg"
  } else if (bn === "another-banner") {
    imageSrc = "/images/another-banner.jpg"
  } else {
    imageSrc = "/images/default-banner.jpg"
  }

  return (
    <StaticImage src={imageSrc} alt="Banner" loading="eager" />
  )
}

Таким образом, при переходе по URL с параметром bn будет подставлено соответствующее изображение без мерцания.

Если у вас нет react-router-dom, вы можете использовать useLocation из пакета @reach/router, который входит в Gatsby по умолчанию.

Вот пример, как можно использовать useLocation и StaticImage для подмены изображения на странице в Gatsby без react-router-dom:

jsxCopy code
import React from "react"
import { useLocation } from "@reach/router"
import { StaticImage } from "gatsby-plugin-image"

const MyComponent = () => {
  const location = useLocation()
  const bn = new URLSearchParams(location.search).get("bn")

  let imageSrc
  if (bn === "gagarina") {
    imageSrc = "/images/gagarina-banner.jpg"
  } else if (bn === "another-banner") {
    imageSrc = "/images/another-banner.jpg"
  } else {
    imageSrc = "/images/default-banner.jpg"
  }

  return (
    <StaticImage src={imageSrc} alt="Banner" loading="eager" />
  )
}

export default MyComponent

Здесь мы используем useLocation из @reach/router для получения текущего URL и параметра bn. Затем мы подставляем нужное изображение в компонент StaticImage с помощью условного оператора if/else. Наконец, мы добавляем атрибут loading="eager", чтобы изображение загружалось заранее и не мерцало при загрузке.

Убедитесь, что изображения gagarina-banner.jpg, another-banner.jpg и default-banner.jpg доступны по соответствующим путям в вашем проекте.