Netlify image cdn showing images as stale and cache control headers not applied

Support
1

I am on nuxt 3 and I have a site deployed on netlify. On my site deploy I can clearly see there is an img folder at the root of the site on netlify.

I have at the site root a _headers file as well.

img/
└── profile_img.jpg
fonts
_headers
netlify.toml

I am using the netlify image cdn and have an image like this

<img :src
  :alt
  loading="lazy"
  decoding="async"
  :srcset="`
    /.netlify/images?url=/img/profile_img.jpg&fm=webp&width=1200,
    /.netlify/images?url=/img/profile_img.jpg&width=1400 2x,
    /.netlify/images?url=/img/profile_img.jpg&fm=webp&width=1600 3x
  `"
  :sizes="`
    (max-width: 767px) 100vw
  `">

The network tab shows

Cache-Status: "Netlify Edge"; fwd=stale

What I am trying to get is

Cache-Status: "Netlify Edge"; hit

In my _headers file I have the following cache-control header set

/img/*
  cache-control: public
  cache-control: max-age=604800
  cache-control: must-revalidate

According to the docs for customer headers with netlify image cdn

To use custom headers with Netlify Image CDN, apply header rules to your source images.

/source-images/*
  Cache-Control: public, max-age=604800, must-revalidate

This does not work for me and I see in my network tab

Cache-Control:        public,max-age=0,must-revalidate
Cache-Status:         "Netlify Edge"; fwd=stale

But if I put this code in the netlify.toml file at the root I get the desired result

[[headers]]
  for = '/img/*'
  [headers.values]
  cache-control = '''
  public,
  max-age=604800,
  must-revalidate'''

with the response headers

Cache-Control:     public,max-age=604800,must-revalidate
Cache-Status:      "Netlify Edge"; hit
2

Is there a name of the site?

3

What happens when you remove the /* header that you have? It anyways doesn’t do what you’re trying to achieve by that header.

5

It’s the same result if I remove /*, the thing I don’t understand is if there is a _header file at the root, or a netlify.toml file at the root essentially both setting the same headers, the netlify toml file works and the _headers file does not. Do note also that I am not having both of them at the same time. I was not seeing a cache hit with the _headers file being applied, so I made the same cache control headers with the toml file and that did the trick for some reason

6

Just tried a deploy: 66aa2f530c40b21ea1973081–statuesque-liger-b9b816.netlify.app, with this code: f-122913.zip (2.4 MB) and it seems to be working fine.

7

Which file has a higher priority for http headers, the netlify.toml or a _headers file? Nuxt generates a _headers file so it must be overwriting the headers I specify at /public/_headers, which leads me to believe that the netlify.toml has a higher precedence over the _headers file, please correct me if I am wrong in assuming that.

One other thing, the docs for multi value headers state that the syntaxt should look like this

/*
  cache-control: max-age=0
  cache-control: no-cache
  cache-control: no-store
  cache-control: must-revalidate

I noticed you have

/img/*
  cache-control: public, max-age=604800, must-revalidate

Are the docs out of date for multi value headers?

8

_headers

No. That works as well, but I don’t see a point in splitting that header up for no reason.