How To Create A Record And Add An Image In Database In TYPO3

I use TYPO3 version 10.4.21 and I created an own extension for leaflet.

In frontend I can't see a picture.

My code in js-file for now:

var map = L.map('map', {crs: L.CRS.Simple});
var bounds = [[0,0], [750,1200]];
L.imageOverlay("../Parks/Park.png", bounds).addTo(map);
map.fitBounds(bounds);

The path for the picture is right, but I can't display the picture "Park.png".
Then I thought there is no data in my database.

In ext.tables.sql:

CREATE TABLE tx_interaktivekarte_domain_model_park (
    image int(11) DEFAULT NULL,
    bgcolor varchar(255) DEFAULT NULL,
    markers int(11) DEFAULT NULL,
    icon varchar(255) DEFAULT NULL,
    iccolor int(11) DEFAULT NULL,
    pin int(11) DEFAULT NULL,
    title varchar(255) DEFAULT NULL,
    marker int(11) unsigned NOT NULL DEFAULT '0'
);

CREATE TABLE tx_interaktivekarte_domain_model_marker (
    park int(11) unsigned DEFAULT '0' NOT NULL,
    title varchar(255) DEFAULT NULL,
    lat varchar(255) DEFAULT NULL,
    lon varchar(255) DEFAULT NULL,
    contenthtml text DEFAULT NULL,
    icon varchar(255) DEFAULT NULL,
    text text DEFAULT NULL
);

How can I add a image in a database?

I referred an extension: https://docs.typo3.org/p/onm/int-park/1.0/en-us/Installation/Index.html And there is written "Under any folder, create a db record ‘Park’, add image in it.". Maybe I have to do it same thing in my extension, but I don't know what the text means.

What do I have to do to display my picture on leaflet? And is it because of database?

I have aright to access into database with phpMyAdmin.

Thank you for your help.

In TYPO3 you should store images as references. TYPO3 provides a File Abstraction Layer which you and your extension should use.

That starts with integration in TCA, see: https://docs.typo3.org/m/typo3/reference-tca/10.4/en-us/ColumnsConfig/Type/Inline.html#file-abstraction-layer

For the frontend output, you can refer to this part of the documentation: https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/Fal/UsingFal/Frontend.html

So, two short points:

1. Correct integration in backend via TCA and references
2. Correct integration in frontend via Image ViewHelper and either fetching FileReference object via Extbase or via DataProcessing.