Help

Upcoming database upgrades. Airtable functionality will be reduced for ~15 minutes at 06:00 UTC on Feb. 4 / 10:00 pm PT on Feb. 3. Learn more here

How can I retrieve an image from a table when using VueJS?

528 2
cancel
Showing results for 
Search instead for 
Did you mean: 

I have created a Base and have set a column (videoImage) to use an Attachment. Next I have uploaded an image. In my VueJS app I have the following however the path of the image is incorrect and the image won’t render.

<img v-bind:src="record['fields']['videoImage']" class="img-responsive" alt="Video">

broken image path

Therefore, is there a way to get the URL of any item such as documents, images etc that are uploaded as attachments or bind the correct path in Vue?

2 Replies 2

This is an object, not a URL. A file attachment field object looks like this:

image

As such, you need to identify the URL field. e.g., …

record['fields']['videoImage'][0].url

That’s amazing Bill. Thank you very much for your help, it’s very much appreciated.