How to render product metafiled image on product card

[tmg1101]

I have a custom product metafiled and i would like to render it inside my product card


this is the custom code i have added
<img
src="{{ card_product.metafields.custom['sales_banner']|image_url: 'master' }}"
width="{{ card_product.metafields.custom['sales_banner'].width }}"
height="{{ card_product.metafields.custom['sales_banner'].width }}"
>

and this is the result i got, it seems like i didn't get the image source right. can anyone help? thanks a lot!!!

[devcoders]

Hello @tmg1101 

Please try this code.

{% if card_product.metafields.custom.sales_banner %}
<img
src="{{ card_product.metafields.custom.sales_banner | image_url: 'master' }}"
alt="Sales Banner"
width="{{ card_product.metafields.custom.sales_banner.width }}"
height="{{ card_product.metafields.custom.sales_banner.height }}"
>
{% else %}
<!-- Optional: fallback image or no banner -->
<p>No sales banner available</p>
{% endif %}

[tmg1101]

Thank you for replying. I have tried the code but it's still not display the image 😭

[devcoders]

Hello @tmg1101 
If you can provide me with store access, I can check and let you know.