Display metafield's list of images on order status page

[umochka]

I am trying to display photos of prepared orders (bouquets) on order status pages. The photos would be uploaded by the store staff during order fulfillment. Customers could then view these photos on the order status page. 

It should be possible to set this up using order metafields. I have created an order metafield order.metafields.custom.order_pic, which is a list of images (files):

I have uploaded two images to this metafield for a test order. And, added the following liquid block to Settings -> Checkout -> Order status page:

<script>
{% if order.metafields["custom"]["order_pic"] != blank %}
var msg = '<h2 class="heading-2">Photos of your prepared bouquet(s)</h2><p> </p> <div>';
{% for item in order.metafields.custom.order_pic%}
msg = msg + '<img src="{{item | img_url}}">';
{% endfor %}
msg = msg + '</div>';
{% endif %}
Shopify.Checkout.OrderStatus.addContentBox(msg);
</script>

However, when I display order status page for that order, I see "No Image" gif instead of the images that I uploaded to the order:

Also, if I change the liquid code line above from

msg = msg + '<img src="{{item | img_url}}">';

to

msg = msg + '{{item}}';

so, it displays the content of the metafield value (i.e., not using a liquid filter img_url to get the image url), I get gid url printed (e.g., "gid://shopify/MediaImage/11111111111"):

Am I supposed to use a different liquid filter to get the metafield's image url, when displaying metafield values inside checkout's liquid block?

Any help with this is much appreciated! Thank you in advance!