Using base_path and directory variables in twig template

Question

I'm creating a Drupal 8 theme. I have overriden the menu.html.twig... and I need to add an image to the first menu item.

In the page.html.twig I have used {{ base_path ~ directory }} to get the url of image like this:

<img class="logo_inder" src="{{ base_path ~ directory }}/img/logo-inder.png" />

But I'm trying to insert an image in themes/(my_theme)/templates/menu.html.twig like this:

<img src="{{ base_path ~ directory }}/img/inicio-icono.png" />

But is in this file, I can't print these variables:

{{ directory }}
{{ base_path }}

or

{{ base_path ~ directory }}

How can I print the base URL for use in my image?

Answer 1

You can expose the base_path variable to all you templates by implementing hook_preprocess() in your theme .theme file.

e.g.

/**
 * Implements hook_preprocess().
 */
function mytheme_preprocess(array &$variables, $hook) {
  $variables['base_path'] = base_path();
}

where mytheme is the machine name of your theme.

You can use {{ active_theme_path() }} to get the path to the active theme.