Photos showing on preview but not published page

[JMcMurdo]

At my company we are in the process of redoing our website and trasnferring it to hubspot. We have a blog post template that was created by a third party designer that we are trying to use to create our blog posts. The "Case Study Goals Module" is what we are trying to use to show a "goal" and a "photo" on our blog posts. I have manipulated the html code to allow us to show two different "goals" and pictures. In the preview space for the design manager I am able to see the pictures I have inserted. However, in the preview space if I change the "viewport preset" the photos disappear. This is also the case when I publish the module. On the blog post page I can edit the module to insert the "goal" and "photo"  but when I click off the module, the photo disappears. 

I have very little knowledge when it comes to manipulating the html or css codes, however, we are trying to resolve this issue in house rather than including our third party designers. 

I am just looking for something I can add or change in the code to make sure my photos do not disappear from the published codes. I have attached the links to our design manager and one of our blog posts. 

Thanks!

Design Manager Case Study Goals Module  

Blog that includes case study goals module on left hand side  

[Kevin-C]

Hey @JMcMurdo 

Could you provide an annotated screen shot of where the images should show up, as well as a link to that page?

[JMcMurdo]

@Kevin-C 

I hope this helps!

Below is the code I am trying to manipulate.

<section class="section goals-section">
<h3>Products</h3>
<ul class="goals-list">
{% for item in module.goals %}
<li>
<i class="fas fa-check"></i>
{{item}}
</li>
{% endfor %}
</ul>
</section>
{% for item in module.image_field.src %}
{% set sizeAttrs = 'width="{{ module.image_field.width }}" height="{{ module.image_field.height }}"' %}
{% if module.image_field.size_type == 'auto' %}
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif module.image_field.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image_field.max_width }}px; max-height: {{ module.image_field.max_height }}px"' %}
{% endif %}
{% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %}
<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endfor %}

Link that to the page where the module is placed.

https://app.hubspot.com/blog/6277271/edit-beta/39152166366/content 

Below are screenshots of the blog post where the photo is when editing the module and when clicked off the photo disappered.

[Kevin-C]

M appologies for the double post.

The code you modified would be helpful too.