🖼️Profile Image

Learn how to use Airstack API to fetch ENS profile image data in various sizes.

Airstack provides easy-to-use APIs for enriching Web3 applications and integrating on-chain and off-chain data from ENS.

In this guide you will learn how to use Airstack to get ENS profile image in various sizes.

Pre-requisites

• An Airstack account

• Basic knowledge of GraphQL

Get Started

JavaScript/TypeScript/Python

If you are using JavaScript/TypeScript or Python, Install the Airstack SDK:

npm

React

npm install @airstack/airstack-react

Node

npm install @airstack/node

yarn

React

yarn add @airstack/airstack-react

Node

yarn add @airstack/node

pnpm

React

pnpm install @airstack/airstack-react

Node

pnpm install @airstack/node

pip

pip install airstack

Then, add the following snippets to your code:

React

import { init, useQuery } from "@airstack/airstack-react";

init("YOUR_AIRSTACK_API_KEY");

const query = `YOUR_QUERY`; // Replace with GraphQL Query

const Component = () => {
  const { data, loading, error } = useQuery(query);

  if (data) {
    return <p>Data: {JSON.stringify(data)}</p>;
  }

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }
};

Node

import { init, fetchQuery } from "@airstack/node";

init("YOUR_AIRSTACK_API_KEY");

const query = `YOUR_QUERY`; // Replace with GraphQL Query

const { data, error } = await fetchQuery(query);

console.log("data:", data);
console.log("error:", error);

Python

import asyncio
from airstack.execute_query import AirstackClient

api_client = AirstackClient(api_key="YOUR_AIRSTACK_API_KEY")

query = """YOUR_QUERY""" # Replace with GraphQL Query

async def main():
    execute_query_client = api_client.create_execute_query_object(
        query=query)

    query_response = await execute_query_client.execute_query()
    print(query_response.data)

asyncio.run(main())

Other Programming Languages

To access the Airstack APIs in other languages, you can use https://api.airstack.xyz/gql as your GraphQL endpoint.

🤖 AI Natural Language​

Airstack provides an AI solution for you to build GraphQL queries to fulfill your use case easily. You can find the AI prompt of each query in the demo's caption or title for yourself to try.

Airstack AI (Demo)

Get ENS Profile Image

You can provide the domain name, e.g. vitalik.eth, into the name input filter and fetch the ENS profile image from the response with the tokenNft.contentValue.image field:

The images returned will already be resized by Airstack and can be used directly within your application:

• extra_small: 125x125px

• small: 250x250px

• medium: 500x500px

• large: 750x750px

Try Demo

https://app.airstack.xyz/query/PN6u9k0NQ4

Show me ENS profile image of vitalik.eth

Code

Query

query MyQuery {
  Domains(
    input: { filter: { name: { _eq: "vitalik.eth" } }, blockchain: ethereum }
  ) {
    Domain {
      tokenNft {
        contentValue {
          image {
            extraSmall
            small
            medium
            large
            original
          }
        }
      }
    }
  }
}

Response

{
  "data": {
    "Domains": {
      "Domain": [
        {
          "tokenNft": {
            "contentValue": {
              "image": {
                "extraSmall": "https://assets.airstack.xyz/image/nft/nNBFvZ6wvuIHqDzTFi5pM/pM0Q1IAUgJRNTJrw7f4s3msKuOthSDfoAV6MR5Ue/EiPbgVeU3k+Cvz8sVZWCzXs4SBrIQIAUkye/EmeyMSxWG6wPc0VufPWGCZpP7bR7XGa9jXJgSZ032qABqGFbsvRt6dukJ42iQpcEUa6WVPeM=/extra_small.svg",
                "small": "https://assets.airstack.xyz/image/nft/nNBFvZ6wvuIHqDzTFi5pM/pM0Q1IAUgJRNTJrw7f4s3msKuOthSDfoAV6MR5Ue/EiPbgVeU3k+Cvz8sVZWCzXs4SBrIQIAUkye/EmeyMSxWG6wPc0VufPWGCZpP7bR7XGa9jXJgSZ032qABqGFbsvRt6dukJ42iQpcEUa6WVPeM=/small.svg",
                "medium": "https://assets.airstack.xyz/image/nft/nNBFvZ6wvuIHqDzTFi5pM/pM0Q1IAUgJRNTJrw7f4s3msKuOthSDfoAV6MR5Ue/EiPbgVeU3k+Cvz8sVZWCzXs4SBrIQIAUkye/EmeyMSxWG6wPc0VufPWGCZpP7bR7XGa9jXJgSZ032qABqGFbsvRt6dukJ42iQpcEUa6WVPeM=/medium.svg",
                "large": "https://assets.airstack.xyz/image/nft/nNBFvZ6wvuIHqDzTFi5pM/pM0Q1IAUgJRNTJrw7f4s3msKuOthSDfoAV6MR5Ue/EiPbgVeU3k+Cvz8sVZWCzXs4SBrIQIAUkye/EmeyMSxWG6wPc0VufPWGCZpP7bR7XGa9jXJgSZ032qABqGFbsvRt6dukJ42iQpcEUa6WVPeM=/large.svg",
                "original": "https://assets.airstack.xyz/image/nft/nNBFvZ6wvuIHqDzTFi5pM/pM0Q1IAUgJRNTJrw7f4s3msKuOthSDfoAV6MR5Ue/EiPbgVeU3k+Cvz8sVZWCzXs4SBrIQIAUkye/EmeyMSxWG6wPc0VufPWGCZpP7bR7XGa9jXJgSZ032qABqGFbsvRt6dukJ42iQpcEUa6WVPeM=/original_image.svg"
              }
            }
          }
        }
      ]
    }
  }
}

Developer Support

If you have any questions or need help regarding fetching ENS profile images data, please join our Airstack's Telegram group.

More Resources

• Profile Image Guides

• Domains API Reference

• TokenNfts API Reference