Render Teaser Image in search block using Twig

Question

I am trying to render the teaser image in my search block using twig. For my views page for rending the articles i am using this:

  <div class="img-container" itemscope="" itemtype="http://schema.org/imageObject" data-internal-url="{{ url }}">
    {% block teaser_img_container %}
        {{ content.field_teaser_media }}
    {% endblock %}
  </div>

And it works very nice but on search block it does not display the image, so I am trying other options like

<div class="img-container" itemscope="" itemtype="http://schema.org/imageObject" data-internal-url="{{ url }}">
  <picture>

   {% block teaser_img_container %}

<img src="{{ file_url(node.field_teaser_media.entity.uri.value) }}" >
 {% endblock %}

     </picture>
  </div>

Which should solve my problem, but i still don't see the image i am getting no errors, if i go in my page source the link to image appears but when i inspect the code from I get

<img src="/">

The link works, but it does not display my image. Any ideas for fix?

Answer 1

You could use the URL Formatter Module

Then go to Manage Display and for your image field and select URL Formatter as your formatter.

then use: <img src="{{ content.field_teaser_media[0] }}">

Answer 2

The problem was in my Manage Display i forgot to put my Teaser Default (Display from where i take my default settings for other teaser displays) to the format Rendered Entity.

Thank you for your help.