Remote images not being optimised

[ItsEthanH]

Hello :)

I think I've uncovered a bug whereby using images via https doesn't result in images being fetched, optimised and rendered in tags.

My config is as follows:

./src/config/plugins/image.js

module.exports = {
	eleventyInputDir: "./src",
	imagesOutputDir: "public/assets/images",
	urlPath: "/assets/images/",
	fetchRemote: true,
	minWidth: 50,
	maxWidth: 2000,
	hoistImgClass: true,
	widthStep: 200,
	sizes: "100vw",
	sharpAvifOptions: {
		quality: 95,
	},
	sharpWebpOptions: {
		quality: 95,
	},
	sharpJpegOptions: {
		quality: 95,
	},
};

I'm then using eleventy with a Shopify plugin to fetch images and render them in the form of cards, using a Nunjucks macro. I have tested this using just an image tag, and the same still applies. The macro is called like so:

pages/product-listing.html

{% from 'components/listed-product.html' import listedProduct %}
...
  <section class="plp-listing">
    <ul class="plp-listing__container">
      {% for product in shopify.products | reverse %}
        {{ listedProduct(
          product.images.nodes[0].src,
          product.title,
          "$" + product.variants.nodes[0].priceV2.amount | formatPrice,
          '',
          "/products/" + product.handle)
        }}
      {% endfor %}
    </ul>
  </section>

Then this listed-product macro is as follows

_includes/components/listed-product.html

{% macro listedProduct(src, name, price, styles, href) %}
  <li class="listed-product {{ styles }}">
    <img class="listed-product__image" src="{{ src }}" alt="{{ name }}">
    <p class="listed-product__title">{{ name }}</p>
    <p class="listed-product__price">
      {{ price }}
    </p>
    <a href="{{ href }}" class="listed-product__button">View Product</a>
  </li>
{% endmacro %}

Finally, the built HTML in /public is so:

  <li class="listed-product ">
    <img class="listed-product__image" src="https://cdn.shopify.com/s/files/1/0748/0872/1690/files/edit-9.jpg?v=1689013081" alt="Proverbs Woman">
    <p class="listed-product__title">Proverbs Woman</p>
    <p class="listed-product__price">
      $55.00
    </p>
    <a href="/products/proverbs-woman" class="listed-product__button">View Product</a>
  </li>

Let me know if you need anything further from me :)

[saneef]

Thanks @ItsEthanH pointing this out. I'll look into it.

[saneef]

I have published a new version 4.1.3. This issue should be resolved. Do reopen this issue if it doesn't.

Cheers!