Accessing attachment thumbnail URL from record value

[Sticker_ninja]

I’m building a custom app and need to show an attachment’s thumbnail image as part of an info card.

When I enter <div>{record.getCellValue("Attachment field")}</div> to view the cell values, I get the following error:

Error: Objects are not valid as a React child (found: object with keys {linkedRecordId, value}). If you meant to render a collection of children, use an array instead.

I’ve tried adding record.getCellValue("Attachment field").fields.url but it comes up as undefined.

I’ve also tried {record.map(value => {value.url})} to try access the object’s properties but map is not a function of record.

How can I access the thumbnail’s URL?

[Kamille_Parks · Accepted solution]

Try something like:

record.getCellValue("Attachment field")?.map(x => {
   var url= x.url
   return (<img src={url} />)
})

[Emma_Yeap]

Hi Michael,

Adding on to Kamille’s solution: the cell value formats for all the different field types are documented here: Airtable Blocks SDK

The cell value for attachment fields is an array of attachment objects (even if there’s only one attachment), so you’ll need to get the url(s) from those individual attachment objects.

[Sticker_ninja]

Right on, thanks to @Kamille_Parks and @Emma_Yeap I was able to piece it together:

{record.getCellValue("Lookup attachment field")?.map(x => {
    var url= x.value.thumbnails?.large?.url
    return (<img src={url} />)
})}

The extra value property is what allows this to work with a lookup field pointing to an attachment in another table if that is helpful to anyone.

[Kamille_Parks]

To clarify for others only add .value if you’re pulling from a Lookup field. This question was asked regarding Attachment fields. Actual attachment fields do not return a value property within the object returned by .getCellValue().