How to display images in Airtable React components

Other Questions Airtable
1

I’m working on an Airtable React project and I’m trying to display an image in my component. I have a file named banner.png that is located in the same directory as my main JavaScript file:

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

Since the Airtable platform doesn’t utilize webpack for bundling, importing images doesn’t work the same way as in regular React applications. I’ve made several attempts to reference the image but haven’t had success:

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

Here’s how my component is structured:

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="App banner" />
      </div>
    );
  }
}

export default MainApp;

What is the correct way to use local images in Airtable React apps?

2

i ran into this similar issue! try moving your banner.png to the frontend/assets/ directory. after that, you can use ./assets/banner.png in your img src. don’t forget to list it in the block.json manifest under resources to get it working!