Display order metafield image in Order Printer app

[Koennn]

When I print the packslip of my order, I would like it to include an image that the customer uploaded. The images are stored in the order metafield.

I am trying to display this by editing the template in the Order Printer App. I tried 27 different ways, but none seem to work. 

Test 1 {{ metafields.custom.foto_s | file_url }} <br/>

Test 2 {{ metafields.custom.foto | file_url }} <br/>

Test 2 {{ metafields.custom.foto | url }} <br/>

Test 3 {% if order.metafields.custom.foto %}
    <img src="{{ order.metafields.custom.foto }}" alt="Order Image" style="max-width: 100%; height: auto;" />
{% else %}
    <p>No image available</p>
{% endif %}

Test 4 {{ order.metafields.custom.foto | media_tag }}<br/>

Test 5 {{ order.metafields.custom.foto }}<br/>

Test 6 {% assign image_id = order.metafields.custom.foto %}
{% if image_id %}
    <img src="https://mublio.nl/cdn/shop/files/{{ image_id }}" alt="Order Image" style="max-width: 100%; height: auto;" />
{% else %}
    <p>No image available</p>
{% endif %} <br/>

Test 7 {% assign metafield_value = order.metafields.custom.foto %}
{% if metafield_value %}
  <a href="{{ metafield_value | file_url }}">Download File</a>
{% endif %}<br/>


Test 8 {{ order.metafields.custom.foto | file_reference }}<br/>

Test 9 {{ order.metafields.custom.foto | file_url }}<br/>


Test 10 {% assign metafield_value = order.metafields.custom.foto | file_url %}
{% if metafield_value %}
  {% assign media = product.media | where: 'id', metafield_value | first %}
  {% if media and media.media_type == 'image' %}
    <img src="{{ media.preview.image | img_url: 'original' }}" alt="Image" />
    <a href="{{ media.preview.image | img_url: 'original' }}">Download File</a>
  {% else %}
    <p>No valid file found.</p>
  {% endif %}
{% endif %}

{% assign metafield_value = order.metafields.custom.foto | file_url %}
Test1 {{ metafield_value }} <br/>

Test 11 {% for metafields_item in order.metafields.custom.foto %}
  {{metafields_item.reference.MediaImage.image.url  | file_reference}}
{% endfor %}<br/>

Test 12 {{ order.metafields.custom.foto.value.url | file_url  }}<br/>

Test 13 {{ order.metafields.custom.foto.value.url | file_reference }}<br/>

Test 14 {{ order.metafields.custom.foto.value.url }}<br/>

Test 15 {{ order.metafields.custom.foto.value }}<br/>

Test 16 {{ order.metafields.custom.foto.value | file_url  }}<br/>

Test 17 {{ order.metafields.custom.foto.value | file_reference }}<br/>

Test 18 {{ order.metafields.custom.foto.value | file_reference }}<br/>

Test 19 {{ order.metafields.custom.foto.value }}<br/>

Test 20 {{ order.metafields.custom.foto }}<br/>

Test 21 {{ order.metafields.custom.foto.value | product_img_url: 'thumb' | img_tag }}<br/>

Test 22 {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}<br/>

Test 23 {% assign image_url = order.metafields.custom.foto.value %}
{% if image_url != blank %} 
 <img src="{{ image_url.value | image_url }}">
{% endif %}<br/>

Test 24 {{ order.metafields.custom.foto }}<br/>

Test 25 {{ order.metafields.custom.foto.value }}<br/>

Test 26 {% if product.metafields.custom.foto %}
    <img src="{{ product.metafields.custom.foto | img_url: 'master' }}"> 
{% endif %}<br/>

Test 27 {{ card_product.metafields.custom.tag_image | img_url: 'master' }}  <br/>

The result of the code above in html is:

Test 1 //mublio.nl/cdn/shop/files/?3482
Test 2 //mublio.nl/cdn/shop/files/?3482
Test 2
Test 3 Order Image Test 4 Liquid error (line 19): media_tag does not support String
Test 5 gid://shopify/MediaImage/51054247215452
Test 6 Order Image
Test 7 Download File
Test 8 gid://shopify/MediaImage/51054247215452
Test 9 //mublio.nl/cdn/shop/files/gid://shopify/MediaImage/51054247215452?3482
Test 10
No valid file found.

Test1 //mublio.nl/cdn/shop/files/gid://shopify/MediaImage/51054247215452?3482
Test 11
Test 12 //mublio.nl/cdn/shop/files/?3482
Test 13
Test 14
Test 15
Test 16 //mublio.nl/cdn/shop/files/?3482
Test 17
Test 18
Test 19
Test 20 gid://shopify/MediaImage/51054247215452
Test 21 
Test 22 
Test 23
Test 24 gid://shopify/MediaImage/51054247215452
Test 25
Test 26
Test 27 //mublio.nl/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c.gif

 
It seems to me I need a link to the Shopify CDN, like 

https://cdn.shopify.com/s/files/1/0615/0927/1744/files/image.jpg?v=1725808787

But I seem only able to this kind of link via de code I tried. Could anybody help me out here?

[PaulMartin]

Have you tried

order.metafields.custom.foto.value | image_url

In your test examples, you've used product_image_url instead of image_url

[Koennn]

Hi PaulMartin,

Thanks for your message. I made a new test

Test 28 {{ order.metafields.custom.foto.value | image_url }}

But it returns:

Test 28 Liquid error (line 96): invalid url input

[PaulMartin]

Hmmm, how about this one:

{{ order.metafields.custom.foto.value | metafield_tag }}

or this one:

{{ order.metafields.custom.foto | metafield_tag }}

[Koennn]

Hello Paul, thanks again for your help. I tried both:

{{ order.metafields.custom.foto.value | metafield_tag }}

Returns nothing

{{ order.metafields.custom.foto | metafield_tag }}

Does return 

 gid://shopify/MediaImage/50918188155228

This is the GID and I need the url to be able the show the image in an <img> tag. Do you have any other ideas?

[PaulMartin]

Hi Koennn,

Unfortunately, I've ran out of ideas ☹️ Sorry man

[Koennn]

Thanks for your help so far! Hope somebody else has some experience with this issue.