Links
🖼

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.

Table Of Contents

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

Pre-requisites

  • An Airstack account (free)
  • Basic knowledge of GraphQL

Get Started

JavaScript/TypeScript/Python

If you are using JavaScript/TypeScript or Python, Install the Airstack SDK:
npm
yarn
pnpm
pip
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:
React
Node
Python
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.
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
Response
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

https://app.airstack.xyz/query/FBm7aw5m16
Show me Lens profile image of lens/@vitalik

Code

Query
Response
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

https://app.airstack.xyz/query/DGytdRwbjx
Show Farcaster profile image of Farcaster user vitalik.eth

Code

Query
Response
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