Displaying images in React with Airtable: A troubleshooting guide

Other Questions Airtable
1

I’m struggling to show a picture in my React app that uses Airtable. My logo file is in the same folder as my main JavaScript file, but it’s not showing up. I’ve tried a few ways to add the image:

<img src={window.location.origin + './logo.png'} />
<img src={'./logo.png'} />

But nothing works! Here’s what my app looks like now:

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

function MyApp() {
  return (
    <div>
      <h2>Greetings from my Airtable app!</h2>
      <img src={'./logo.png'} alt='My logo' />
    </div>
  );
}

export default MyApp;

The app runs fine, but the image is missing. How can I fix this? I’m not using webpack, so I can’t import the image directly. Any ideas would be super helpful!

2

hey jack, i had similar probs. try using public folder for images in react. put ur logo there n use process.env.PUBLIC_URL to reference it. like this:

<img src={${process.env.PUBLIC_URL}/logo.png} alt=‘My logo’ />

this worked for me hope it helps u too!

3

Have you considered hosting your image externally? I’ve found that using a service like Imgur or even a CDN can solve these tricky image loading issues in React apps, especially when working with Airtable. You could upload your logo to one of these services and then use the direct URL in your img tag. It’s a bit of extra setup, but it’s more reliable than trying to fiddle with local file paths. Just make sure to use an https URL for security. Something like this might work:

<img src='https://i.imgur.com/yourlogo.png' alt='My logo' />

This approach has saved me countless headaches when dealing with asset loading in various environments.

4

I encountered a similar issue with referencing image files in my Airtable React projects. In my case, using conventional file paths didn’t work reliably within the Airtable environment. Instead of relying on external file references, I converted the image to a base64 encoded string using an online tool. After generating the base64 string, I directly set it as the src attribute of the image tag. This solution bypasses the asset path problem and works well for small images like logos, even though it may not be ideal for larger pictures.