I am currently building a commerce shop. Usually, I use embed, entity browser and dropzone js, to make a product images collection available to shop administrators. This time, I used a Drupal media collection as a product variation field. And now I don’t know how to loop through the fields array to retrieve the file uris for each image.

        <div class="gallery">         {% for item in product.variation_field_product_images['#items'] %}             {% if loop.first %}             <figure class="gallery_thumb first">                 <a href="{{ file_url(item.entity.uri.value) }}" data-size="1024x1024">                     <img src="{{ file_url(item.entity.uri.value) }}" alt="Product Title" />                 </a>             </figure>             {% else %}                           <figure class="gallery_thumb">                 <a href="{{ file_url(item.entity.uri.value) }}" data-size="1024x1024">                     <img src="{{ file_url(item.entity.uri.value) }}" alt="Product Title" />                 </a>             </figure>             {% endif %}                  {% endfor %}             </div> 

The above code works as desired for a ordinary image field type. But when I set the type to media, the file uri is rendered as "unknown".

{{ product.variation_field_product_images.0 }} {{ product.variation_field_product_images.1 }} 

The above twig code for example gives me back the first two images rendered as complete image tags. But I am somehow not able to get the desired file uri. Thank you very much in advance!