Exclude image from for loop based on name

{% for image in page.media.images %}
     <div data-src="{{ image.url }}" data-thumb=""></div>
{% endfor %}

<div class="bit-25 profile-img right">    
   {% if profile_image %}
              {% if profile_image_file %}
                        {% set profile_image_media = page.media.images[profile_image_file] %}
              {% else %}
                        <img src="{{ url('theme://images/profile.jpg') }}" class="profile-image"/>
              {% endif %}
                        {{ profile_image_media.html('Title', 'Alt', 'Class') }}
     {% endif %}
</div>
--- 

As you can see I set the 'profile image' based on toggle. If yes, then check the field 'profile_image_file', where the user provided the name of the image it wants as profile image.

This all works perfectly fine.. the only problem is that the profile image, being located in the page directory is also loaded in my full width gallery on top of my page. 

Is there a way to exclude this profile image from the first for loop, based on the name provided in 'profile_image_file'?

maybe something like?

Im sure its possible with grav, but so far i've had no luck trying to exclude it from my for loop.

{% for image in page.media.images %}
   {% if image = profile_image_file %}
      <!-- do nothing, ignore that image -->
  {% endif %}
     <div data-src="{{ image.url }}" data-thumb=""></div>
{% endfor %}

{% if image.url == page.media['profile_image_file'].url %}
    <!--ignore this image -->
{% endif %}
---

{% for image in page.media.images if image is not == page.header.profile_image_file %}
      <div data-src="{{ image.url }}" data-thumb=""></div>

{% endfor %}

{% if image.filename == profile_image_file %}
                                   <!-- ignore -->
{% else %}