Use netlify image cdn with shopify hosted images

Support
,
1

I have a headless site that I built with Nuxt 3 and I am using <NuxtImage /> with Netlify. How am I supposed to allow remote paths with the Netlify image cdn when the shopify storefront api returns urls that have the following format?

https://cdn.shopify.com/s/files/1/0252/8968/7128/files/fa_pic_027c0eb4-c897-45b8-9673-b76e88a16710.jpg.webp?v=1689025752

In my netlify.toml file how can I set this up so that it works?

[images]
  remote_images = ["https://my-shopify-site.com/.*", "https://animals.more-images.com/[bcr]at/.*"]

Additionally is there a way I can get the ?v=168... to append to the netlify image url for cache busting or do I need a redirect for this?

2

Why do you want to use an image CDN (Netlify) in front of an image CDN (shopify)? That makes absolutely no sense at all.

3

The shopify storefront api returns an array of image objects but it offers limited functionality. What else should I do? I don’t want to put all my images in a public folder in my nuxt site.

[
    {
        "url": "https://cdn.shopify.com/s/files/1/0252/8968/7128/files/product-1.jpg.webp?v=1689025752",
        "altText": "product 1",
        "width": 2200,
        "height": 2799
    }
]
4

What functionality do you want?

5

Another thing to add to this, when I use <NuxtImage /> it is attempting to take my shopify cdn urls and prefix them with /.netlify/images which is breaking my site on netlify.

So in my code I am taking the url from the shopify cdn,

<script setup>
const product = ref({
  id: 1,
  images: [
    {
        "url": "https://cdn.shopify.com/s/files/1/0252/8968/7128/files/product-1.jpg.webp?v=1689025752",
        "altText": "product 1",
        "width": 2200,
        "height": 2799
    }
  ]
})
</script>

<template>
  <div class="wrapper" v-for="(image, index) in product.images">
    <NuxtImage :src="image.url" :alt="image.alt" :height="image.height" :width="image.width" />
  </div>
</template>

And once the site is built on netlify, the source code is showing the image urls all being prefixed with /.netlify/images...

6

I’ll ask again: What functionality are you looking for?

7

Shopify has limited support as usual, and netlify is more robust for image caching, not only that <NuxtImage /> makes dealing with images way easier and it’s setup to be easily integrated with netlify. I made a headless site to get away from the tight coupling of shopify and since I am on netlify I would like to use the image cdn.

The shopify storefront api forces you to pull images in via the cdn and there’s not a whole lot more you can do with it.

8

You can resize using images and crop images, and Shopify’s CDN also serves the best file format (e.g. WEBP).

Also check out Nuxt Image Custom Provider

9

Then what’s the point of using netlify image cdn? In any real world scenario for an ecommerce site the products and images wouldn’t be in the folder structure anyways, they would be hosted somewhere else, like a cdn. In other words, on an ecommerce site, the product images are being pulled in from a cdn, and if the site is hosted on netlify, then what is the point of using the netlify cdn?

10

What’s the point of using Shopify as an ecommerce platform?

11

You said it would be pointless to use a cdn in front of a cdn, so how would you justify using the netlify image cdn if in any real world scenario the images are being pulled in from somewhere, like a headless cms? After all netlify is a hosting platform not a content management platform.

In other words, if using a headless cms, how can you use netlify image cdn since the images are already on a cdn, that would alleviate the use case of ever needing to use the netlify image cdn.

12

I didn’t say that I would. I have no need to justify using it or not.

13

Back to the original question I posted, “Use netlify image cdn with shopify hosted images”. There is no answer to the original question.

14

It absolutely is when both systems are comparable.

There’s no need to justify that, because it’s not necessarily what it was designed for.
Just because it can retrieve images from another domain, and subsequently could mirror from another cdn doesn’t mean it’s the intended purpose of the feature.

It could obviously be pointed at a folder of regular static images, in which case it would be imbuing the images with the additional functionality.

As indicated it does alleviate it under those circumstances.
If the headless CMS provides what you need, why duplicate.
If there’s something to gain, then sure knock yourself out, but if not then why bother.

The applicable documentation, (which I’m sure you’ve already seen), is here:
https://docs.netlify.com/image-cdn/overview/#remote-path

I’ve never worked with it, so cannot speak to if it even works, but the documentation seems quite clear, you should just read it carefully and work from it.

The remote_images property accepts an array of regex. If your images are in specific subdomains or directories, you can use regex to allow just those subdomains or directories.

The format of the URL you have specified is:
https://cdn.shopify.com/s/files/1/0252/8968/7128/files/fa_pic_027c0eb4-c897-45b8-9673-b76e88a16710.jpg.webp?v=1689025752

But what you’ve indicated you have in your remote_images is:

["https://my-shopify-site.com/.*", "https://animals.more-images.com/[bcr]at/.*"]

The second value is clearly unnecessary and taken “copy & paste” from the documentation.

I’m not sure how familiar you are with regex, but https://my-shopify-site.com/.* won’t match https://cdn.shopify.com/s/files/1/0252/8968/7128/files/fa_pic_027c0eb4-c897-45b8-9673-b76e88a16710.jpg.webp?v=1689025752

You can use tools like https://regex101.com to check your rules against the strings you’re trying to match.

Your current rule:

image
image1103×229 44.8 KB

A rule that actually targets the domain you mentioned:

image
image1111×233 47.8 KB

If that doesn’t work, then you’ll probably need to pay attention to what the documentation says about escaping the /:

Note that you need to double-escape regex in netlify.toml files. For example, the string https:// can convert to a regex as https:\/\/ but you should specify it in netlify.toml as https:\\/\\/ .

16

@wizdev And


Who are you and why are you replying in this unrelated thread?

17

Okay am sorry for that :pray:. just wanted to get help to fix my Netflix sign up issues.

18

@wizdev I presume that was your auto-correct taking the wheel because this is Netlify, not Netflix.

Please make your own thread if you haven’t already, (don’t make multiple).

19

Thanks for the clarification, I am already on Netlify and wanted to leverage the image cdn, but I was confused because shopify storefront api uses the shopify cdn and I can‘t move all my images into a folder on my nuxt site. I guess I will have to continue pulling the images off the shopify cdn

20

You wouldn’t strictly have to, but if you’re working with Shopify it’d be safer to do things in a Shopify way.

1 Like