How do I get an image path from field preprocess function After 3 hours of searching the web for this I gave up...

I have added a "banner image" field to the basic page. I want to use the image as a background. I wanted to capture the image path in a preprocess_field function but I tried every possible methods on the \Drupal\image\Plugin\Field\FieldType\ImageItem object and can't seem to find the way to get the path.

mytheme.theme:

function mytheme_preprocess_field(&amp;$variables){
  if($variables['field_name'] == 'field_banner_image'){
    /** @var \Drupal\image\Plugin\Field\FieldType\ImageItem $field */
    $field = $variables['element']['#items'][0];        
    $variables['banner_url'] = $field-&gt;getValue(); // not working, tried everything...
  }
}


Then in my field--field-banner-image.html.twig:

&lt;div class="field--name-field-banner-image" style="background: transparent url({{ banner_url }})"&gt;&lt;/div&gt;
You can do this more simply

$uri = \Drupal\file\Entity\File::load($variables['items'][0]['content']['#item']-&gt;getValue()['target_id'])-&gt;getFileUri()


Or for a field with multiple items

foreach ($variables['items'] as $delta =&gt; $item) {
  $uri = \Drupal\file\Entity\File::load($variables['items'][$delta]['content']['#item']-&gt;getValue()['target_id'])-&gt;getFileUri()
}


And then apply an image style to get the url

$variables['banner_url'] = ImageStyle::load('image_style_name')-&gt;buildUrl($uri);