Get path to theme assets in Twig template

Solutions

<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" />

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();
}

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.

Tags: Media / Drupal 8 / Theming

Similar questions

How to load jQuery assets before blocks and regions
I need a jQuery script to load immediately before a certain block shows on my Drupal 8 front page. I'm trying to use the following but I get 'TypeError $ is not a function' in code inspector. Here's my script: The problem is the first line. In Drupal 8 what is the preferred way to write this script to accomplish what I want?
How to modify .htaccess to serve brotli compressed static assets over gziped ones?
I'm trying to use brotli compressed static assets with Advanced CSS/JS Aggregation as detailed here, https://www.drupal.org/node/2773807. The assets are created as they should be, but they're never served because the .htaccess file doesn't know to do that. lyncd.com has a short walkthrough, https://lyncd.com/2015/11/brotli-support-apache/, but I ha...
Attach JavaScript and CSS assets when render entity using Web Sockets
Goal: Attach all the necessary JavaScript and CSS files to the page, when a rendered entity is delivered on a Web Socket event. Given: Problem: JavaScript and CSS files, needed for rendering, are not attached on the page. (E.g. scripts for display of an image gallery, lazy-loading of images). My ideas: I think that I should list all the necessary J...
Random page rendering error: A stray renderRoot() invocation is causing bubbling of attached assets to break
I have a D8 site that's in development and I am getting this error thrown at random on pages which most of the time render quite happily. There doesn't seem to be any real pattern in it. I can see that it looks like it's designed to prevent the renderer creating an infinite loop (the code is on line 133 of core/lib/Drupal/Core/Render/Renderer.php),...
How to load absolute CSS and JS assets
I would like to load CSS and JS from https://static.example.com . The typical page contains: and contains similar entries for JS. I would like to add https://static.example.com to the front of the href="URL" for both CSS and JS. I'm am aware that this can be done with a contrib module. I would like to find a hook or some other way to add this to my...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.