Passing Image through hook

Question

Background:

Im working in Drupal 8 and I have a paragraph type that contains a title and an image and I am trying to pass it through the preprocessor hook so I can set it inside a html template. For testing purposes all I have on my template is div that calls the image variable. Im more worried about the pre_processor than I am the html

Code:

function theme_preprocess_node(&$variables) {
  if ($variables['node']->getType() == 'landing_page') {
    $paragraphs = $variables['node']->field_section->getValue();
    $section = [];
    foreach ($paragraphs as $key => $paragraph) {
      $p = Paragraph::load($paragraph['target_id']);

      echo "<pre>".print_r($p,TRUE)."</pre>";

      switch ($p->getType()) {
        case 'tabbed_body':
          foreach ($p->field_body_tab_content->getValue() as $tab) {
            $t = Paragraph::load($tab['target_id']);
            $title = $t->field_body_tab_title->getValue();
            $content = $t->field_tab_content->getValue();
            $image = $t->field_body_image->getValue();
            $section[$key]['tabbed_body'][] = [
              'title' => $title[0]['value'],
              'content' => $content[0]['value'],
              'image' => $image[0],
            ];
          }
          break;    
      }
    }
    $variables['sections'] = $section;
   }
}

Image Settings:

Answer 1

You can pass only the image uri, and render image using it in the twig. Try the following suggestion: In your loop try to get image as the following:

  $image_field_values= $t->field_body_image->getValue();
  /**
   * @TODO: if you have multiple values loop through them i will test just by the first
   */
  $image_target_id = $image_field_values[0]['target_id'];
  $image_file = File::load($image_target_id);
  $section[$key]= [
    'image_uri' => $image_file->getFileUri()
  ];

In your twig will be something like:

<img src="{{ file_url(section[0]['image_uri'])}}" >

Don't forget use Drupal\file\Entity\File;.