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.

Solution 1:

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.

Solution 2:

In TYPO3 files are handled normally by FAL (File Abstraction Layer). This means: you get a record with relevant information of the file. in any record which references a file you have symbolic DB-field (with just a counter in it) and you have MM-records which connects the sys_file records of the file to your record.

Your example probably includes special records where files can be referenced.

If you develop extensions you can use this manual to get more information about structure of files and records.

You also can have a look into the declaration of other records like the extension you gave as example.
The currently best example would always be the declaration of the core.
For an example how to include files in a record I would suggest the table tt_content and the field media.
The important part is the TCA declaration, as this configures the 'magic' how an integer field from the database table is connected to a file.