Why aren't images loading in my product-card snippet?

Store Design
1

Hi there i’m making some changes at my product-card snippet, it seems to be all correct on VS, but it doesn’t show correctly, seems to be off loading, can anyone guide me? Here is the part of code that probably got issue.

<a href="{{ product.url | within: collection }}" class="product-card">
  {% assign image = product.featured_image %}
  <div class="product-card__image-container">
    <div class="product-card__image-wrapper">
      <div class="product-card__image js" style="max-width: 100%;" data-image-id="{{ image.id }}" data-image-with-placeholder-wrapper>
        <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100 }}%;">
          {% assign image_url = image | image_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
          <img class="first-image"
            data-src="{{ image_url }}"
            data-widths="[100, 140, 180, 250, 305, 440, 610, 720, 930, 1080]"
            data-aspectratio="{{ image.aspect_ratio }}"
            data-sizes="auto"
            data-parent-fit="contain"
            data-image
            alt="{{ image.alt | escape }}"
            loading="lazy">
          {% if product.images[1] != blank %}
            <img data-src="{{ product.images[1] | image_url: 'original' }}" class="second-image" alt="{{ image.alt | escape }}" loading="lazy" />
          {% else %}
            <img data-src="{{ product.images[0] | image_url: 'original' }}" class="first-image" alt="{{ image.alt | escape }}" loading="lazy" />
          {% endif %}
          <div id="product-card_sizes" class="overlay">
            {% for variant in product.variants %}
             {% if variant.available %}
              <span id="size-available" value="{{ variant.id }}" style="color:#242424; margin:0 6.5px;">{{ variant.title | escape }}</span>
             {% else %}
              <span id="size-unavailable" value="{{ variant.id }}" style="opacity:0.4; margin:0 6.5px;">{{ variant.title | escape }}</span>
             {% endif %}
            {% endfor %}
          </div>
        </div>
        <div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
      </div>
      <noscript>
        <div class="product-card__overlay">
         <img class="hidden" data-src="{{ product.images.last | image_url: '480x' }}" alt="{{ product.images.last.alt | escape }}" loading="lazy" />
        </div>
      </noscript>

maybe get a issue with that loading=“lazy”

Here is preview url, you can check this working on site,

https://lj7fasu8vjw65u4z-53196980409.shopifypreview.com

Thanks to anyone!

2

The code does not know which product to pull. You have to provide the product in the snippet. I can be in forloop for collections

{% for product in collection.products %}

{% endfor %}

3

@made4Uo thanks for your answer, but where i have to start loop?

4

UP!

5

Hi @SHIBdev ,

Try to put your snippet inside the forloop.

Ex:

{% forloop ..... %}
Your Snippet
{% endfor %}