By Stephan Hofmann


2015-12-16 10:16:38 8 Comments

i have a question about getting a path to an image in a twig template. The image is not assigned to an field or something. Just an static image which is stored in "template/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().

template.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.

Update:

I could solve the problem with a combination of a passed variable base_path and the directory variable:

template.theme:

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

Twig template:

<img src="{{ base_path ~ directory }}image/icons/my-icon.png">

3 comments

@Matoeil 2017-06-15 08:44:51

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

@Jignesh Rawal 2018-10-08 15:18:38

This answer should be marked as correct instead

@Berdir 2015-12-16 11:50:17

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.

@Jasodeep Chatterjee 2016-05-27 09:29:59

How to use image from /sites/default/files/MyFolder ? I have a image MyImage.jpg in MyFolder. Now, in twig template if i wrote <img src={{ url }} alt={{ text }}> Here url variable has the path /MyFolder/MyImage.jpg but, it is not working.

@daniels 2017-05-11 20:38:42

As Berdir wrote: one can simply use <img src="/{{ directory }}/path/to/image"/> to get an absolute path.

@pjcarly 2016-01-17 17:36:27

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

@Marcos Buarque 2017-02-23 09:53:58

Thanks for sharing your solution. One quick comment: I had to explicitly add $variables['base_path'] = base_path(); to my THEME_preprocess_html theme hook to make it available to the html.html.twig template file.

@JamesWilson 2019-03-04 20:45:20

Be careful about using {{ directory }} Twig variable in a theme that you intend to use as a base theme and create sub-themes for: drupal.stackexchange.com/questions/277278

Related Questions

Sponsored Content

2 Answered Questions

[SOLVED] why are Twig template variables with markup not being rendered?

  • 2016-01-22 16:04:49
  • RominRonin
  • 5554 View
  • 8 Score
  • 2 Answer
  • Tags:   8 theming

0 Answered Questions

{{ directory }} in Twig template in base theme breaks subtheme

  • 2019-03-04 20:14:24
  • JamesWilson
  • 270 View
  • 0 Score
  • 0 Answer
  • Tags:   8 theming

1 Answered Questions

[SOLVED] Get node internal path from path alias in Twig template

5 Answered Questions

[SOLVED] Get Image URL in Twig

  • 2015-12-27 20:00:38
  • Jannis Hell
  • 34331 View
  • 21 Score
  • 5 Answer
  • Tags:   theming 8 files

2 Answered Questions

[SOLVED] How to get image with image style path to a twig template

  • 2017-04-13 08:10:26
  • Josh
  • 1554 View
  • 1 Score
  • 2 Answer
  • Tags:   theming

3 Answered Questions

[SOLVED] How to get an image URL from a field in a twig template

  • 2016-12-31 16:42:06
  • Adeleke Akinade
  • 11953 View
  • 6 Score
  • 3 Answer
  • Tags:   theming media

1 Answered Questions

[SOLVED] How can get path of image (src) in twig template of a module?

  • 2016-10-13 19:30:46
  • Mojtaba Reyhani
  • 1490 View
  • 2 Score
  • 1 Answer
  • Tags:   8 media

1 Answered Questions

[SOLVED] How to retrieve image URL from Media Bundle field in Twig Template

  • 2016-05-17 07:33:12
  • littledynamo
  • 2334 View
  • 1 Score
  • 1 Answer
  • Tags:   theming 8 media

1 Answered Questions

[SOLVED] In Drupal 8 how do I get the image path from a twig node template?

  • 2016-04-16 02:20:22
  • leif
  • 2052 View
  • 2 Score
  • 1 Answer
  • Tags:   theming 8

0 Answered Questions

I want to use an argument from the path in a twig template (as a html class)

  • 2016-02-01 08:18:13
  • RominRonin
  • 556 View
  • 1 Score
  • 0 Answer
  • Tags:   8 uri theming

Sponsored Content