How to achieve Gatsby progressive image loading using relative imageUrl?

Question

Image Source Query:

 MyQuery {
  ReeceAPI {
    product(productInput: {productId: "MSC-39707"}) {
      imageUrls {
        thumb
        small
        medium
        large
      }
    }
  }
}

Result:

    {
  "data": {
    "ReeceAPI": {
      "product": {
        "imageUrls": {
          "thumb": "http://images.tradeservice.com/ProductImages/DIR100093/CERROC_TUBING_CR_SML.jpg",
          "small": "http://images.tradeservice.com/ProductImages/DIR100093/CERROC_TUBING_CR_SML.jpg",
          "medium": "http://images.tradeservice.com/ProductImages/DIR100093/CERROC_TUBING_CR_MED.jpg",
          "large": "https://ecomm-prod-product-img-store.s3.amazonaws.com/L_Image/3562000.jpg"
        }
      }
    }
  },
  "extensions": {}
}

---

1. I am consuming 3rd party API data and use Gatsby "CreatePages" method to create static pages using a template, see the code below.

    // Product service static pages
    const productcollection = await graphql(`
      query MyQuery {
        ReeceAPI {
          allProducts {
            id
          }
        }
      }
      `).then(result => {
        result.data.ReeceAPI.allProducts.forEach(node => {
            actions.createPage({
            path: `/products/${node.id}`,
            component: path.resolve('./src/templates/product-detail-page.js'),
            context: { id: node.id }
          }); 
        });               
      }) 

2. Mapping the data from collection

const ProductDetails = ({ data }) => {
  const { name,imageUrls,productOverview,featuresAndBenefits } = data.ReeceAPI.product
  return (
    <Layout>
      <div className={styles.details}>
        <h4>Name: {name}</h4><br />
        <img src={imageUrls?.large}></img><br />           

      </div>
    </Layout>
  )
}

Above code working fine and create static pages successfully. External Image needs to be rendered progressively. how to get those attributes and rendered progressively like below example?. Please help

// Other imports...
import Img from "gatsby-image/withIEPolyfill"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img
      fixed={data.file.childImageSharp.fixed}
      objectFit="cover"
      objectPosition="50% 50%"
      alt=""
    />
  </div>
)