How can I display the images from the Uploads directory?

I have an application in PHP 7 using the Slim3 microframework.

The structure of the project is as follows:

Projecct Structure

To run my application I use this configuration in apache:

<VirtualHost *: 80>
    ServerName app
    DocumentRoot "C: \ xampp \ htdocs \ app \ public"
</VirtualHost>

To access the public assets (which are inside the public folder) I use these routes:

href = "../ assets / images /"
href = "../ assets / scripts /"
href = "../ assets / styles /"

I have the problem when I want to access the * uploads * files.

Since, I can’t find how to put the path in the href attribute.

Perform the following tests:

copying and pasting a .jpg file inside assets. Accessed with href =" …/ assets /file.jpg "
copying and pasting a .jpg file into public. Accessed with href =" …/file.jpg "
copying and pasting a .jpg file outside of public. Not accessible with href =" …/…/file.jpg "

The question is : How can I access the files that are in the Uploads folder for show them with IMG tag?

Note1: Some people recommended that I put the Uploads folder inside public

Note2: Inside public/index.php i have this code

$root = dirname(__DIR__);
$settings['root'] = $root;
$settings['temp'] = $settings['root'] . '/temp';
$settings['public'] = $settings['root'] . '/public';
$settings['uploads'] = $settings['root'] . '/uploads';

Note3: I try using a path url like this

<img src="{{ uploads }}/product_1.png">

But get this error on console:

Not allowed to load local resource

You should try to use the baseUrl for images (and not the local filesystem path of the webserver).