Images not displaying through custom block - showing "Broken Image" icon

[PWT]

I am creating a custom section and within that, a custom block. The block will display the selected Product's Image and Title and when clicked on, will take the user to the product page.

Everything is working perfectly except the product image. I am using the following code:

<div class="product-container">
              <div class="brand-product-image-container">
                <a href="{{ product.url }}">
                  <img src="{{ product.featured_image | image_url: 'grande' }}" class="brand-product-image" loading="lazy" width="auto" height="auto">
                </a>
              </div>
              <div class="brand-product-content">
                <div class="brand-product-title">
                  <a href="{{ product.url }}">{{ product.title }}</a>
                </div>
              </div>
            </div>

Everything works fine except the product image does not display and instead the browser default 'broken image' icon shows? (please see screenshot below)

(also tried it originally with <img src="{{ product.featured_image.src" but this also produced the same issue)

I spoke with Shopify support who also inform me that I have advanced code on my site that needs fixing - but aside from adding a few custom sections with very little code in them, I have not touched much else. They advised to post here for a Developer to assist.

Store is running on Dawn theme and is a private development store.

Many thanks

[Liam]

Hi PWT,

Just to confirm if this is in fact related to the theme, if you install a fresh version of Dawn - are the images appearing as expected?

[PWT]

Hi Liam,

Thanks for looking into this for me.

So I think it's more of a syntax error perhaps as the images are loading find on the default sections and blocks of the Dawn theme currently used, but it's when I come to make a custom section or block that the images won't display properly.

Currently, I am having to make the blocks I want to use "type": "text", map it to the src=attribute of an <img> tag and then paste in the link to the image for it to display properly. 

Anytime I want to use the internal image picker, this is when the problem arrises.

Could you confirm the correct code needed for when creating a custom block that would display an image and the customise interface uses the image picker rather than a text field like I am having to do in the above please?

I believe, this would solve the problem so long as it then works on my end.

thanks