🖼️Profile Image

Learn how to fetch profile images of various web3 domains and socials, such as ENS, Farcaster, and Lens.

Airstack provides easy-to-use APIs for enriching Web3 applications with profile images from various protocols.

In this guide you will learn how to use Airstack to:

Get ENS Profile Image (in various sizes)
Get Lens Profile Image (in various sizes)
Get Farcaster 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:

React

npm install @airstack/airstack-react

Node

npm install @airstack/node

React

yarn add @airstack/airstack-react

Node

yarn add @airstack/node

React

pnpm install @airstack/airstack-react

Node

pnpm install @airstack/node

pip install airstack

Then, add the following snippets to your code:

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>;
  }
};

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);

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.

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

Code

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

{
  "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"
              }
            }
          }
        }
      ]
    }
  }
}

Get Lens Profile Image

You can provide the Lens handle, e.g. lens/@vitalik, into the profileName input filter and fetch the Lens profile image from the response with the profileImage giving the original profile image and profileImageContentValue providing the resized versions:

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

Code

query MyQuery {
  Socials(
    input: {
      filter: { profileName: { _eq: "lens/@vitalik" }, dappName: { _eq: lens } }
      blockchain: ethereum
    }
  ) {
    Social {
      profileImage
      profileImageContentValue {
        image {
          extraSmall
          large
          medium
          original
          small
        }
      }
    }
  }
}

{
  "data": {
    "Socials": {
      "Social": [
        {
          "profileImage": "ipfs://QmQP1DyNH8upeBxKJYtfCDdUj3mRcZep8zhJTLe3ePXB7M",
          "profileImageContentValue": {
            "image": {
              "extraSmall": "https://assets.airstack.xyz/image/social/WA1TRm9gbDHIiCUF6iXICUfjUq/5gWZ5lBaDpcgYv0Y=/extra_small.jpg",
              "large": "https://assets.airstack.xyz/image/social/WA1TRm9gbDHIiCUF6iXICUfjUq/5gWZ5lBaDpcgYv0Y=/large.jpg",
              "medium": "https://assets.airstack.xyz/image/social/WA1TRm9gbDHIiCUF6iXICUfjUq/5gWZ5lBaDpcgYv0Y=/medium.jpg",
              "original": "https://assets.airstack.xyz/image/social/WA1TRm9gbDHIiCUF6iXICUfjUq/5gWZ5lBaDpcgYv0Y=/original_image.jpg",
              "small": "https://assets.airstack.xyz/image/social/WA1TRm9gbDHIiCUF6iXICUfjUq/5gWZ5lBaDpcgYv0Y=/small.jpg"
            }
          }
        }
      ]
    }
  }
}

Get Farcaster Profile Image

You can provide the user's fname, e.g. vitalik.eth, into the profileName input filter and fetch the Farcaster profile image from the response with the profileImage giving the original profile image and profileImageContentValue providing the resized versions:

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

Code

query MyQuery {
  Socials(
    input: {
      filter: {
        profileName: { _eq: "vitalik.eth" }
        dappName: { _eq: farcaster }
      }
      blockchain: ethereum
    }
  ) {
    Social {
      profileImage
      profileImageContentValue {
        image {
          extraSmall
          large
          medium
          original
          small
        }
      }
    }
  }
}

{
  "data": {
    "Socials": {
      "Social": [
        {
          "profileImage": "https://i.imgur.com/gF9Yaeg.jpg",
          "profileImageContentValue": {
            "image": {
              "extraSmall": "https://assets.airstack.xyz/image/social/t7c6r/zEOQzL8ozyEr1fFmzEH3KbNAYrWqlNPs9+OwU=/extra_small.jpg",
              "large": "https://assets.airstack.xyz/image/social/t7c6r/zEOQzL8ozyEr1fFmzEH3KbNAYrWqlNPs9+OwU=/large.jpg",
              "medium": "https://assets.airstack.xyz/image/social/t7c6r/zEOQzL8ozyEr1fFmzEH3KbNAYrWqlNPs9+OwU=/medium.jpg",
              "original": "https://assets.airstack.xyz/image/social/t7c6r/zEOQzL8ozyEr1fFmzEH3KbNAYrWqlNPs9+OwU=/original_image.jpg",
              "small": "https://assets.airstack.xyz/image/social/t7c6r/zEOQzL8ozyEr1fFmzEH3KbNAYrWqlNPs9+OwU=/small.jpg"
            }
          }
        }
      ]
    }
  }
}

Developer Support

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

More Resources

PreviousToken Gating NextERC20

Last updated 1 month ago

Was this helpful?

Airstack Developer Docs & FAQs

🖼️Profile Image

Table Of Contents

Pre-requisites

Get Started

JavaScript/TypeScript/Python

Other Programming Languages

🤖 AI Natural Language

Get ENS Profile Image

Try Demo

Code

Get Lens Profile Image

Try Demo

Code

Get Farcaster Profile Image

Try Demo

Code

Developer Support

More Resources

Table Of Contents

Pre-requisites

Get Started

JavaScript/TypeScript/Python

Other Programming Languages

🤖 AI Natural Language​

Get ENS Profile Image

Try Demo

Code

Get Lens Profile Image

Try Demo

Code

Get Farcaster Profile Image

Try Demo

Code

Developer Support

More Resources

🤖 AI Natural Language