Get path to theme assets in Twig template

Question

I have a question about getting a path to an image in a Twig template. The image is not assigned to a field or something. Just a static image which is stored in "MYTHEME/image/icon/my-icon.png".

In Drupal 7 I get the path in my node.template with the following code:

<img src="<?php print base_path() . path_to_theme(); ?>/image/icons">/my-icon.png

How does it work with in Drupal 8? I tried to pass a variable in template_preprocess_node().

MYTHEME.theme:

$variables['images_path'] = \Drupal::theme()->getActiveTheme()->getPath() . '/image/';

Twig template:

<img src="{{ images_path  ~ 'icons/' ~ 'my-icon.png' }}">

It doesn't work. There is no PHP error, but the path is wrongly said to be http://localhost/node/themes/template/image/icons/my-icon.png.

Answer 1

you can use {{ base_path ~ directory }} which will fix the absolute problem, no need to do any preprocessing, both of these variables are included by core.

For example

<img src="{{ base_path ~ directory }}/images/logo.png" alt="My Logo" />

PS. the ~ helper in twig is concatenate.

Edit: at least in the page*.html.twig templates base_path variable is included, possibly you will need to do preprocessing for other templates, you can easily check with {{ dump() }} if the variables are present

// File: THEMENAME.theme in your theme's root directory
function THEMENAME_preprocess(&$variables, $hook)
{
    $variables['base_path'] = base_path();
}

Answer 2

<img src="/{{ directory }}/images/logo.png"/> 

worked for me when

<img src="{{ base_path ~ directory }}/images/logo.png" alt="My Logo" />

did not

for content template, i had to use in .module

   function hook_preprocess(&$variables, $hook) {

  $module_handler = Drupal::service('module_handler');
  $path = $module_handler->getModule('myModuleName')->getPath();

  if(isset($variables['region']) && $variables['region'] == 'content'){
    $variables['module_path'] = $path;
    $variables['http_host'] = $_SERVER['HTTP_HOST'];

and

  <img src="{{ module_path }}/images/error404.png" />
  <img src="//{{ http_host }}/{{ module_path }}/images/error403.png" />

Answer 3

There is by default a {{ directory }} variable that you can use that points to your theme directory. The problem is, it's not absolute, just like the one you added. I think that's a bug in core because it should include the base path, but changing that would of course break existing sites that use it.

So you need to add a / in front of it; this would break if Drupal is installed in a subfolder. You can either hardcode that in your template or keep using base_path() as you did in 7.x in a custom variable.

Answer 4

To print an image url that is inside your custom theme use the following construction:

{% set icon_path = [
  url('<front>')|render|trim('/', 'right'),
  active_theme_path(),
  'relative/path/to/image.png'
]|join('/') %}

<img src="{{ icon_path }}" alt="uncategorized"/>

If you have already installed twig_tweak module then you can reuse drupal_url function:

<img src="{{ drupal_url(active_theme_path() ~ '/relative/path/to/image.png', {absolute: true}) }}" alt="uncategorized"/>

Answer 5

<img src="{{ base_path ~ '/modules/custom/YOUR_MODULE_NAME/images/logo.png' }}" />

The above line works for loading images in Twig template where both are placed in your custom module without any need to add $base_path to hook_preprocess.