Image URL in srcset not set correctly

[thmsnhl]

I am using nuxt-img in a project with deployment target "static", images are pulled from a Content Management System and not locally hosted.
I do not specify a provider or define any other options in nuxt.config.js.

When running nuxt generate everything seems to be working as intended and the build logs output ✔ Generated static image dist/_nuxt/image/{HASHED-FILENAME}.jpg for every image. But when I inspect the DOM, the created <picture>-Elements contain a lot of <source>-Elements with the initial image URL instead of the freshly generated one.

[atinux]

What version are you using @thmsnhl ?

[pi0]

This is a known issue (see #166)

[thmsnhl]

@atinux I am using the latest Version 0.4.0

@pi0 Oh sorry, I didn't see this one when scrolling through the existing issues

[thmsnhl]

@pi0 I just looked into #166 and I don't see a relation between the described issue there and mine.

To clarify: the rendered URL in the <source>-Element is exactly the URL used in <nuxt-img :src="${CMS_IMAGE_URL}" />.

[pi0]

Latest version is 0.2.1 (0.0.4 is old). Original URLs are being used as fallback when resized version is not included in payload mapping with default provider (static) (which addressed in #162 sorry i used wrong ref)

It would be nice if you can try it and if not working sharing your repository.

[thmsnhl]

Oh sorry, I also had a typo in the version number. I use latest version which is indeed 0.2.1 🤦

I'll try to validate the payload on my own, unfortunately I am not allowed to share the repository.

[thmsnhl]

So I took a look into _nuxt/static/article/name-of-the-article/payload.js and found the following:

  ... 
  return {
    data: [
      {
        article: {...},
        _img: {
          '/_img/remote/_/w_640/https://the.api.url/assets/iStock-1146697288.jpg': 'e1474b.jpg',
          '/_img/remote/_/w_750/https://the.api.url/assets/iStock-1146697288.jpg': '7ee5ad.jpg',
          '/_img/remote/_/w_828/https://the.api.url/assets/iStock-1146697288.jpg': '624500.jpg',
          '/_img/remote/_/w_1080/https://the.api.url/assets/iStock-1146697288.jpg': 'a6ac68.jpg',
          '/_img/remote/_/w_1200/https://the.api.url/assets/iStock-1146697288.jpg': '524fa4.jpg',
          '/_img/remote/_/w_1920/https://the.api.url/assets/iStock-1146697288.jpg': '077a17.jpg',
          '/_img/remote/_/w_2048/https://the.api.url/assets/iStock-1146697288.jpg': 'c79f8d.jpg',
          '/_img/remote/_/w_3840/https://the.api.url/assets/iStock-1146697288.jpg': '9cd549.jpg',
          '/_img/remote/_/_/https://the.api.url/assets/iStock-1146697288.jpg': '1e1413.jpg',
        },
      }
    ]
  }
  ...

Does this help to debug the issue?

[benhutchings]

I've just run into a similar issue to yours,

When I load an image from the assets folder I get this src and the image fails to load:

<img alt="jake-starr-f" class="__nim_o" src="/_image/ipx/local/_/_/~/assets/images/postcards/jake-starr-f.jpg" style="position: absolute; left: 0px; top: 0px; margin: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity 800ms ease 0ms; opacity: 0;">

However if I use a hosted image like the following, it works fine:

<img alt="preview" class="__nim_o" src="/_image/ipx/remote/_/_/https://image.nuxtjs.org/preview.png" style="position: absolute; left: 0px; top: 0px; margin: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity 800ms ease 0ms; opacity: 1;">

Any ideas what's happening here? Thanks in advance

[atinux]

You cannot use ~ inside the src, images has to be inside the static/ directory in order for the image modules to proxy it

[shadow81627]

I have a pull request to add @nuxt/image which is failing my performance tests in CI and locally. The images are working correctly in Vercel preview.

When I turn nuxt generate and nuxt start the original image urls are being hydrated rather than the static generated urls. When I run lighthouse CI some of the original images are too large and fail performance tests. When I run lighthouse in my browser again Vercel preview it works.

I am using:

• "@nuxt/image": "0.4.7"
• "nuxt": "2.15.4"

I think maybe sometimes the static images hydrate properly but then maybe they don't load properly from cache?

[pi0]

@shadow81627 Vercel preset is automatically enabled in vercel environment (https://image.nuxtjs.org/providers/vercel). Maybe you can try providing sizes or explicitly set preset: static in nuxt.config?

1200 is one of them: https://daim-a6mjo9p9u-damienrobinson.vercel.app/_vercel/image?url=/img/portfolio/scuber.jpg&w=1200&q=100

[danielroe]

I think the original issue should be solved with #236 (though I realise there are some other issues here too). I'm closing it; please create a new issue if needed. 🙏