How to call image into reactjs and airtable - reactjs

Question

Am using airtable.com helloworld sample code. my logo.jpg is in the same directory as the index.js files
myproject-folder\frontend\index.js
myproject-folder\frontend\logo.png
The airtable app is not using webpack so I could not import the logo image.
I have tried calling the image directly as per code
below but could not get it to work.
<img src={window.location.origin + './logo.jpg'} />
<img src={'./logo.jpg'} />
here is the code
import {
initializeBlock,
useBase,
useRecords,
} from '#airtable/blocks/ui';
import React, { Component } from "react";
class App extends Component {
render() {
return (
<div>
<h2>Hello world from Airtable</h2>
<img src={'./logo.jpg'} />
</p>
</div>
);
}
}
export default App;

Answer 1

If I understand correctly you are using webpack to build your app.
Webpack treat assets as dependencies. As such, you need to import your image and use an appropriate loader to handle the file type of your logo.
From webpack's documentation:
[...] When you import MyImage from './my-image.png', that image will
be processed and added to your output directory and the MyImage
variable will contain the final url of that image after processing.
[...] The loader will recognize this is a local file, and replace the
'./my-image.png' path with the final path to the image in your output
directory.
In your case, you could do this:
import React, { Component } from "react";
import {
initializeBlock,
useBase,
useRecords,
} from '#airtable/blocks/ui';
import logo from './logo.png';
class App extends Component {
render() {
return (
<div>
<h2>Hello world from Airtable</h2>
<img src={logo} />
</div>
);
}
}
export default App;
You'd then need to add the file-loader to your webpack config file:
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},