Skip to main content
Solved

Cannot add image to my helloworld app

  • June 3, 2020
  • 2 replies
  • 35 views
F

I have my logo.jpg image inside frontend folder of my helloworld app. I tried to call the image but nothing is being displayed.

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



function HelloWorldBlock() {
    // YOUR CODE GOES HERE
    return <div>Hello world  🚀<img src={'./logo.jpg'} /> <img src='./logo.jpg' /></div>;
}
initializeBlock(() => <HelloWorldBlock />);

Best answer by Leo_Lutz

It doesn’t look like their build process copies static assets across. Until they do or mention how to, you can use data URI to inject the image.

const logo = ' data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcQAAA...';

<img src={logo} />

2 replies

L
Forum|alt.badge.img
  • Leo_Lutz
  • New Participant
  • Answer
  • June 5, 2020

It doesn’t look like their build process copies static assets across. Until they do or mention how to, you can use data URI to inject the image.

const logo = ' data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcQAAA...';

<img src={logo} />
F
  • Fredrick_Esedo
  • Author
  • Known Participant
  • June 7, 2020

It doesn’t look like their build process copies static assets across. Until they do or mention how to, you can use data URI to inject the image.

const logo = ' data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcQAAA...';

<img src={logo} />

Thank you so much for the hint

Terms & ConditionsAccessibility statement