Obtener la URL de la imagen de una imagen_campo en un nodo

Entonces tengo este nodo:

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)

Ahora field_image tiene una matriz con x-default y algunos datos de imagen básicos. ¿Cómo muestro la imagen o creo un enlace a la imagen dentro de la plantilla Twig?

Aquí hay una versión actualizada de esta respuesta después de 8.0.x. Esta base en el comentario de @joelpittet .

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

No sé acerca de Twig, pero obtienes el URI del archivo $node->field_image->entity->getFileUri()en PHP, y necesitas llamar file_create_url()a eso:

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

No sé si eso es posible en Twig. Si no es posible, siempre puede calcularlo en el proceso previo y agregarlo como una nueva variable.

Si alguien necesita una imagen con estilo:

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

Ninguna de las soluciones de ramitas anteriores funcionó para mí (quizás las que funcionaron para versiones anteriores de 8.x pero no para la versión 8.5

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

NOTA: debería funcionar para Drupal 8.5+

Así que he encontrado la respuesta con la ayuda de Clive .

La obtención del URI de la imagen en Twig se realiza utilizando node.field_image.0.entity.uri.value

Puede obtener la URL completa de la imagen usando file_create_url(node.field_image.0.entity.uri.value)

Hacer esto en Twig aún no es posible, pero están trabajando en ello -> ver aquí

Lo que terminó trabajando para mí en D8 es:

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

Usar kint($node->get('field_image')->entity)y mirar a través de la matriz fue muy útil

Luego, en mi archivo de ramita, utilicé:

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

puedes obtener la url directamente usando field_image.entity.url

Siempre estoy usando una función 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());
    }
  }

De esta manera, si desea obtener la URL de la imagen con el estilo de imagen asociado para cualquier campo de imagen en una plantilla de ramita:

Primero instale el módulo Twig Tweak

Luego configure el URI de la imagen como una variable. Con el URI, puede usar un patrón de ajustes de ramita para obtener el camino con el estilo de imagen que desee. Vea abajo:

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

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

Twig Tweak v2.4 + ofrece un file_urlfiltro para extraer la URL del archivo de una entidad.

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

Tuve el mismo problema, así que creé una get_image_path()función Twig y la agregué con un montón de otras cosas útiles a mi módulo de inicio:

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

La función acepta el campo de imagen y el nombre de máquina de un estilo de imagen, luego devuelve esa ruta de imagen.

Funciona en muchos contextos: puede pasar node.field_name, content.field_nameo row._entity.field_name(en el caso de una plantilla de campos Ver).

Dios mío, en realidad me llevó mucho tiempo descubrir por qué las URL resultantes no funcionaban. Todos los 404'ed. Primero debe crear un derivado si aún no existe .

Entonces, por ejemplo, cuando agrega un estilo de imagen más tarde, después de cargar la imagen original, todavía no hay un archivo de imagen con estilo (el derivado de la imagen). Necesita ser creado primero.

Reemplace field_MYIMAGEy MYSTYLEsegún lo necesite.

$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);

Deseo que esto suceda automáticamente.

algo relacionado, esto es lo que usé (gracias a todas las respuestas anteriores para llevarme allí) para obtener una URL del archivo de imagen del campo de imagen de una entidad de medios en rama:

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

ahora puedo usar esta variable en mi plantilla de ramita

{{ media_img_url }}

Para obtener atributos de imagen como URI, alt, título, etc., use la sintaxis como se muestra a continuación.

En plantilla de ramita de nodo

{{node.field_name.entity.fileuri}}

En campo plantilla de ramita

{{content.field_name.entity.fileuri}}

En otra plantilla de ramita de campo

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

Nota: Consulte también la hoja de trucos del módulo twig_tweaks para obtener detalles relacionados con el problema relacionado con la rama.

Puede usar el url()método que se encuentra en la clase File como acceso directo, por lo que:

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

se puede acortar a:

{{ node.field_image.entity.url }}

Esto funciona en las funciones de preproceso, pero activa un Twig_Sandbox_SecurityErrorcuando se llama en una plantilla de ramita.

Si lo recibe Twig_Sandbox_SecurityError, puede decirle a Twig que permita urlel archivo settings.php como se menciona en esta publicación de Stackoverflow

Ver documentación en Archivo :: Url () https://api.drupal.org/api/drupal/core%21modules%21file%21src%21Entity%21File.php/function/File%3A%3Aurl/8.6.x

¡Puedes hacerlo de dos maneras!

1) file_create_url (---------) // dentro de escribir la ruta del nodo

2) file_url (-------) // dentro de escribir la ruta del nodo