How do I display an image associated with a vendor?

[Hyperspace]

Hello! I have been trying to figure out how to display a vendor image, with no success.

This is what I am trying to achieve:

And this is the code I have so far:

<div class="page-width" style="column-count:4;">
<ul>

  {%- for product_vendor in shop.vendors -%}
<li>
{% if collections[coll_handle].image %}
    <a href="{{ collections[coll_handle].url }}">
      {{ collections[coll_handle].image | collection_img_url: '300x' | img_tag }}
    </a> 
{% endif %}
</br> 
{{ product_vendor | link_to_vendor }} 
</li>
  {%- endfor -%}
</ul>
</div> 

This code results in the following:

QUESTIONS:

1. First of all, I am not clear on where I should be pulling a photo from, and how to add a photo (logo) to a vendor in the first place.

2. Why the heck is the first brand a bit lower than the rest?

Could someone help me out? I feel like I am almost there, but am missing something of key importance.