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 setup is pretty simple:

my-app/
  ├── frontend/
  │   ├── index.js
  │   └── company-icon.png

The tricky part is that this Airtable app doesn’t use webpack. So I can’t just import the image like I usually would. 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 no luck so far. Here’s what my main component looks like:

import React from 'react';
import { useAirtableStuff } from '@airtable/blocks/ui';

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

export default MainView;

Any ideas on how to get that image showing up? I’m stumped!

2

Have you considered hosting your image externally? I’ve found this to be a reliable solution when working with Airtable apps. You could upload your company icon to a service like Imgur or even a cloud storage bucket (AWS S3, Google Cloud Storage, etc.), then use the direct URL in your img tag.

For example:

function MainView() {
  return (
    <div>
      <h2>Welcome to my Airtable-powered app!</h2>
      <img src='https://your-hosting-service.com/company-icon.png' alt='Company logo' />
    </div>
  );
}

This approach sidesteps the local file path issues and ensures your image is always accessible, regardless of how Airtable’s environment is set up. Just make sure the hosting service you choose allows hotlinking if you go this route.

3

Hey there, I’ve faced similar issues with Airtable integrations before. Since Airtable’s custom app environment is a bit different from a typical React setup, you might need to approach this differently.

One workaround I’ve found effective is to use Base64 encoding for your images. Here’s how you can do it:

  1. Convert your image to Base64 (there are online tools for this).
  2. Store the Base64 string in a constant in your component file.
  3. Use it directly in the src attribute of your img tag.

Something like this:

const companyIconBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';

function MainView() {
  return (
    <div>
      <h2>Welcome to my Airtable-powered app!</h2>
      <img src={companyIconBase64} alt='Company logo' />
    </div>
  );
}

This method bypasses the need for webpack or other bundlers to handle image imports. It’s not ideal for large images or a lot of images, but for a simple icon, it should work well. Hope this helps!

4

yo tom, i’ve been there. airtable can be tricky with images. have u tried using a data URL? it’s like embedding the image right in ur code. u convert the image to base64 and use that as the src. like this:

it’s not perfect but it works in a pinch. good luck!