How to get access all images of custom directory in twig template?

Question

I intend to create a slideshow in front page of my theme to show all images in custom directory, I try to use file_scan_directory and drupal_get_path in below codes to get any non static images path and display that images automatically without any need to calling each one of them separately:
Theme Name.theme:

function MyThemeName_preprocess_page(&$variables) {
$mask = '/\.(?:jp[e]?g|gif|png)$/i';
$files = file_scan_directory(drupal_get_path('theme', 'Theme Name') . '/assets/img/orbit', $mask);
ksort($files);
$variables['files'] = $files;
}

page.html.twig:

{% for file in files %}
<img src="{{ file.uri }}" width="100%" height="100%" alt="{{ file.name }}"/>
{% endfor %}

I would be happy to hear what is the problem with the codes and what is the right way to load that slideshowe pictures?

Answer 1

The path will be wrong, file_scan_directory() will return a relative path, you need to add the base_path(), you can set a variable in preprocess:

$variables['base_path'] = base_path();

So...

<img src="{{ base_path }}{{ file.uri }}" width="100%" height="100%" alt="{{ file.name }}"/>