Show vendor image on vendor list page

thumsn
Excursionist
23 1 3

Hey guys,

I have a page called "vendorlist" to list all vendors in our shop.

My question is how to get the vendor image shown in that list. Even better it would be as in the screenshot attached.

This is the code:

{% assign counter = 0 %}
{% for vendor in shop.vendors %}
{% assign counter = counter | plus: 1 %}
{% endfor %}
 
{% assign counter_divided_by_3 = counter | divided_by: 3 | floor %}
 
<div class="container row large-row-under">
  <div class="reading-width">
    <h1 class="large-title row">{{ page.title }}</h1>
 
    <div class="rte rte--expanded-images clearfix">
      {{ page.content }}
      <ul class="vendor-list block-grid three-up mobile one-up">
{% for product_vendor in shop.vendors %}
{% assign its_a_match = false %}
{% capture my_collection_handle %} {{ product_vendor | handleize | strip | escape  }} {% endcapture %}
{% assign my_collection_handle_stripped = my_collection_handle | strip | escape %}
 
{% for collection in collections %}
{% if my_collection_handle_stripped == collection.handle %}
    
{% assign its_a_match = true %}
{% endif %}
{% endfor %}
 
{% if its_a_match %}
<li class="vendor-list-item"><a href="/collections/{{ product_vendor | handleize }}">{{ product_vendor }}</a> </li>
 
        
        
{% else %}
<li class="vendor-list-item">{{ product_vendor | link_to_vendor }} - no - </li>
{% endif %}
{% endfor %}
</ul>
    </div>
  </div>
</div>

Anybody in the mood for helping me?

Thanks in advance.

Michael

Bildschirmfoto 2021-03-13 um 2.13.24 PM.png