Help

Cannot add image to my helloworld app

Topic Labels: Extensions
Solved
Jump to Solution
1559 2
cancel
Showing results for 
Search instead for 
Did you mean: 
Fredrick_Esedo
5 - Automation Enthusiast
5 - Automation Enthusiast

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 />);
1 Solution

Accepted Solutions
Leo_Lutz
4 - Data Explorer
4 - Data Explorer

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} />

See Solution in Thread

2 Replies 2
Leo_Lutz
4 - Data Explorer
4 - Data Explorer

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