Obtendo o URL da imagem de uma imagem de campo em um nó

Então, eu tenho esse nó:

object(Drupal\node\Entity\Node)[1862]
  protected 'values' => 
    array (size=17)
      'vid' => 
        array (size=1)
          'x-default' => string '7' (length=1)
      'langcode' => 
        array (size=1)
          'x-default' => 
            array (size=1)
              0 => 
                array (size=1)
                  'value' => string 'en' (length=2)
      ... (more fields)
      'field_image' => 
        array (size=1)
          'x-default' => 
            array (size=1)
              0 => 
                array (size=5)
                  'target_id' => string '1' (length=1)
                  'alt' => string '' (length=0)
                  'title' => string '' (length=0)
                  'width' => string '150' (length=3)
                  'height' => string '120' (length=3)

Agora o field_image possui uma matriz com x-default e alguns dados básicos da imagem. Como mostro a imagem ou crio um link para a imagem dentro do modelo Twig?

Aqui está uma versão atualizada para esta resposta após 8.0.x. Esta base no comentário @joelpittet .

{{ file_url(node.field_image.entity.fileuri) }}

Eu não sei sobre o Twig, mas você obtém o URI do arquivo $node->field_image->entity->getFileUri()no PHP, e você precisa chamar file_create_url()isso:

file_create_url($node->field_image->entity->getFileUri())

Não sei se isso é possível em galho. Se não for possível, você sempre pode calculá-lo no pré-processo e adicionar como uma nova variável.

Se alguém precisar de uma imagem estilizada:

$styled_image_url = ImageStyle::load('large')->buildUrl($node->field_image->entity->getFileUri());

Nenhuma das soluções de galho acima funcionou para mim (talvez as que funcionaram para as versões 8.x mais antigas, mas não para a versão 8.5

{{ file_url(node.field_image['#items'].entity.uri.value) }}

NOTA: deve estar funcionando para o Drupal 8.5+

Então, eu descobri a resposta com a ajuda de Clive .

A obtenção do URI da imagem no Twig é feita usando node.field_image.0.entity.uri.value

A obtenção do URL completo da imagem pode ser feita usando file_create_url(node.field_image.0.entity.uri.value)

Ainda não é possível fazer isso no Twig, mas eles estão trabalhando nisso -> veja aqui

O que acabou trabalhando para mim no D8 é:

$imageUrl = $node->get('field_image')->entity->uri->value;

Usar kint($node->get('field_image')->entity)e examinar a matriz foi muito útil

Então, no meu arquivo de galho, usei:

<img class="top-article-image" src="{{ file_url(imageUrl) }}" />

você pode obter o URL diretamente usando field_image.entity.url

Estou sempre usando uma função auxiliar

  /**
   * Get the Image URI.
   *
   * @param \Drupal\Core\Entity\Entity $entity
   * @param $fieldName
   * @param bool $imageStyle
   * @return mixed
   */
  public function getImageUri(\Drupal\Core\Entity\Entity $entity, $fieldName, $imageStyle = FALSE) {
    $imageField = $entity->get($fieldName)->getValue();
    if (!empty($imageField[0]['target_id'])) {
      $file = File::load($imageField[0]['target_id']);
      if ($imageStyle) {
        return ImageStyle::load($imageStyle)->buildUrl($file->getFileUri());
      }

      // Original URI.
      return file_create_url($file->getFileUri());
    }
  }

É assim que você deseja obter o URL da imagem com o estilo de imagem associado a qualquer campo de imagem em um modelo de galho:

Primeiro instale o módulo Twig Tweak

Em seguida, defina o URI da imagem como uma variável. Com o URI, você pode usar um padrão de twig tweaks para obter o caminho com o estilo de imagem desejado. Ver abaixo:

{% set image_uri = content.field_feature_row_image['#items'].entity.uri.value %}

<img src="{{ image_uri|image_style('image1200x1103') }}"/>

Twig Tweak v2.4 + oferece file_urlfiltro para extrair o URL do arquivo de uma entidade.

<img src="{{ node.field_image|file_url|image_style('image1200x1103') }}"/>

Como tive o mesmo problema, criei uma get_image_path()função Twig e a adicionei com várias outras coisas úteis ao meu módulo Starter padrão:

https://github.com/brynj-digital/starter

A função aceita o campo da imagem e o nome da máquina de um estilo de imagem e retorna o caminho da imagem.

Ele funciona em muitos contextos - você pode passar node.field_name, content.field_nameou row._entity.field_name(no caso de uma vista modelo de campos).

Puxa, na verdade demorei minhas idades para descobrir por que meus URLs resultantes não funcionaram. Todos os 404'ed. Você precisa criar um derivado primeiro se ele ainda não existir .

Por exemplo, quando você adiciona um estilo de imagem posteriormente, após o upload da imagem original, ainda não existe um arquivo de imagem com estilo (o derivado da imagem). Ele precisa ser criado primeiro.

Substitua field_MYIMAGEe MYSTYLEconforme necessário.

$original_image = $node->field_MYIMAGE->entity->getFileUri();
$style = \Drupal::entityTypeManager()->getStorage('image_style')->load('MYSTYLE');

$destination = $style->buildUri($original_image);
if (!file_exists($destination)) {
  $style->createDerivative($original_image, $destination);
}

$url = $style->buildUrl($original_image);

Eu gostaria que isso acontecesse automaticamente.

um pouco relacionado, eis o que eu usei (graças a todas as respostas anteriores para chegar lá) para obter um URL de arquivo de imagem no campo de imagem de uma entidade de mídia em galho:

{% set media_img_url = file_url(content.field_media_image.0['#item'].entity.uri.value) %}

agora eu posso usar essa variável no meu template galho

{{ media_img_url }}

Para obter atributos de imagem como URI, alt, título, etc, use a sintaxe como abaixo no modelo

No modelo de galho de nó

{{node.field_name.entity.fileuri}}

Modelo de galho de campo

{{content.field_name.entity.fileuri}}

Em outro modelo de galho de campo

{{element['#object'].field_name.entity.fileuri}}

Nota: Verifique também a folha de dicas do módulo twig_tweaks para obter detalhes relacionados ao problema relacionado ao galho.

Você pode usar o url()método que está na classe File como um atalho para:

{{ file_url(node.field_image.entity.fileuri) }}

pode ser reduzido para:

{{ node.field_image.entity.url }}

Isso funciona nas funções de pré-processo, mas dispara um Twig_Sandbox_SecurityErrorquando chamado em um modelo de galho.

Se você receber, Twig_Sandbox_SecurityErrorpode dizer ao twig para permitir urlno seu arquivo settings.php, conforme mencionado neste post do Stackoverflow

Consulte a documentação em File :: Url () https://api.drupal.org/api/drupal/core%21modules%21file%21src%21Entity%21File.php/function/File%3A%3Aurl/8.6.x

Você pode fazer isso de duas maneiras!

1) file_create_url (---------) // dentro escreve o caminho do nó

2) file_url (-------) // dentro escreve o caminho do nó