Displaying images in a React app with Airtable integration

Other Questions Airtable
1

I’m working on a React project that uses Airtable’s sample code. My app’s structure is simple:

my-app/
  frontend/
    index.js
    company-icon.png

I’m not using webpack, so I can’t import the image file directly. I’ve tried a couple of ways to show the image:

<img src={window.location.origin + './company-icon.png'} />
<img src={'./company-icon.png'} />

But neither worked. Here’s my current code:

import React from 'react';
import { initializeBlock, useBase, useRecords } from '@airtable/blocks/ui';

function MainComponent() {
  return (
    <div>
      <h2>Greetings from my Airtable app!</h2>
      <img src={'./company-icon.png'} alt='Company logo' />
    </div>
  );
}

export default MainComponent;

How can I properly display the image in my React component when using Airtable? Any help would be great!

2

Have you considered using a public URL for your image instead of a local file path? When working with Airtable’s Block SDK, it’s often easier to host your images externally. You could upload your company-icon.png to a service like Imgur or use a CDN, then reference the full URL in your img tag.

For example:

<img src='https://your-cdn.com/company-icon.png' alt='Company logo' />

This approach bypasses the need to deal with local file paths, which can be tricky in the Airtable environment. It also ensures your image is accessible regardless of how Airtable serves your app. Just make sure the image URL is publicly accessible. If you’re concerned about security, you could look into Airtable’s attachment field type for storing and serving images within your base.

3

I’ve faced similar issues when working with Airtable and React. One solution that worked for me was using Base64 encoding for the image.

You can convert your image to Base64 using an online converter, then create a constant for the encoded image string in your React component. For example:

const companyLogo = ‘data:image/png;base64,YOUR_BASE64_STRING_HERE’;

After that, you can reference the constant in your img tag:

Company logo

This approach sidesteps file path issues and guarantees that the image is embedded directly within the component. It works well for small logos, although for larger files, a CDN or public URL might be a better choice.

4

hey happydancer, have u tried moving ur image to a public folder? in react apps, there’s usually a ‘public’ directory for static assets. try this:

  1. move ‘company-icon.png’ to ‘my-app/public/’
  2. update ur code:

Company logo

this shud work cuz react knows to look in the public folder for assets. lmk if it helps!