frames-devs

Building FOSS via @frames, /open-frames to help decentralized social win. a16z CSX23. farcasterchannels.com farcaster.id

I have a question. I’m a beginner working with frames.js to create a frame. On the results page, I want to display the data values and profile images for more than 10 users.

I'm not sure, but it feels like when there are too many output elements in the frame, image loading fails. I've combined data values into a single string to reduce the number of elements, but for profile images, since they use URLs, it seems I can't reduce them the same way.

How can I display profile image URLs for more than 10 users on the results page without any issues?

husband, replyer, Korean, non-english user. web3, AI

I'm currently testing in local debugging mode and trying to add profile images before each username on the results page.

On the first screenshot, only data values are included.
On the second screenshot, all data values are removed, and only profile images are added.
On the third screenshot, both data values and profile images are displayed together.

I feel like when there are too many output elements, image loading fails. Is that correct?

Here’s the code I used to add the images. Since I’m adding 15 images one by one, I thought the high number of elements might be causing this issue. I attempted to combine the images into a single output but wasn’t successful.

What method should I use to combine images into a single output? I tried using the sharp library and Base64, but they didn't work (maybe I did something wrong).
I'll be deploying on vercel.

<div style={{
    display: 'flex',
    flexDirection: 'column',
    width: '40px',
    height: '600px',
    gap: '0px'
}}>
    {heroesData.map((hero, index) => (
        <img 
            key={index}
            src={hero.profileImage} 
            alt={`Profile ${index + 1}`}
            style={{
                width: '40px',
                height: '40px',
                borderRadius: '50%',
                objectFit: 'cover'
            }} 
        />
    ))}
</div>

what's the error?

You'd need to create an image that contains the other 10 pfps