Loading images in Airtable React component without webpack

[Claire29]

I’m working with an Airtable application using their sample template code. I have a banner.png file located in the same folder as my main.js file:

app-directory\src\main.js
app-directory\src\banner.png

Since the Airtable environment doesn’t support webpack bundling, I can’t use standard import statements for image assets.

I’ve attempted various approaches to reference the image file directly but none seem to work:

<img src={window.location.href + './banner.png'} />
<img src={'./banner.png'} />

Current implementation:

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

class MainApp extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to my Airtable App</h1>
        <img src={'./banner.png'} alt="Company logo" />
      </div>
    );
  }
}

export default MainApp;

What’s the proper way to display local images in this setup?

[Dave_17Sketch]

To properly display a local image in your Airtable app, you should create a public folder at the same level as your src directory and place your banner.png file there. Then, you can reference it using an absolute path like <img src="/banner.png" alt="Company logo" />. Keep in mind that Airtable’s build system treats images as static assets, so relative imports will not work as they do with webpack. Your file structure should look like this: app-directory/public/banner.png.

[Ryan_Innovative]

Had this exact problem with my first Airtable block. Here’s what fixed it: put your banner.png directly in the frontend directory at the root level - not in src. So it should be app-directory/frontend/banner.png. Then just use - don’t mess with the path. Works every time for me. Oh, and restart your dev server after moving the file so Airtable picks it up properly.

[ryanl]

Had this exact problem last year building a custom inventory block. The solutions above work, but here’s what saved me hours of frustration.

Skip the file path headaches entirely - convert your images to base64 and embed them directly. Takes 30 seconds and you’re done.

Run this:

base64 -i banner.png

Paste the output:

const bannerImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";

<img src={bannerImage} alt="Company logo" />

Works great in Airtable’s environment, no folder structure mess. Only catch is file size - fine for logos and banners, not so much for huge images.

Full walkthrough on building custom Airtable apps here:

Building a Custom Airtable App: Step-by-Step Guide