How to extract image URL from ens avatar text record

To extract image URLs from ENS (Ethereum Name Service) avatar text records, follow these steps:

Step 1: Identify the ENS Name

First, identify the ENS name you want to query (e.g., example.eth).

Step 2: Retrieve the Records

Use ENS-related libraries or services to query the text records for the ENS name. For example, with the ethers.js library, you can query the text records as follows:

javascript
const { ethers } = require("ethers");

// Connect to the Ethereum network
const provider = new ethers.providers.JsonRpcProvider("https://mainnet.infura.io/v3/YOUR_INFURA_API_KEY");

// ENS name
const ensName = "example.eth";

// Retrieve the avatar text record
async function getAvatarText(ensName) {
    const avatarText = await provider.lookupAddress(ensName);
    return avatarText;
}

Step 3: Parse the Image URL

Typically, the avatar text record will either be a direct URL or a JSON object. If it's a JSON object, parse it to extract the image URL. For example:

javascript
async function extractImageUrl(ensName) {
    const avatarText = await getAvatarText(ensName);
    let imageUrl;

    try {
        // Attempt to parse JSON
        const avatarJson = JSON.parse(avatarText);
        imageUrl = avatarJson.url; // Assuming URL is stored under the 'url' key
    } catch (e) {
        // If the text record is not JSON-formatted, treat it as a direct URL
        imageUrl = avatarText;
    }

    return imageUrl;
}

Step 4: Test and Validate

Ensure the code can handle different formats of avatar records, including direct URLs and URLs embedded in JSON. Run the function for various ENS names to verify its correctness.

Practical Application Example

Suppose we want to add a user avatar feature to a DApp under development, where the user's avatar information is stored under their ENS name. By implementing the above steps, we can easily extract the avatar URL from the user's ENS name and display it within our DApp.

This feature enhances user experience as users can personalize their identity and appearance within the DApp through their ENS name. Additionally, it demonstrates how to leverage ENS's extensibility and flexibility in real-world applications.