$img does not return the correct url on nuxt generated pages

[tanc]

The $img function correctly generates the image on nuxt generate and returns the url to the generated image, but when viewing the generated page the returned url is incorrect and the image does not load.

For example the following (simplified) code in a page component:

<template>
  <div class="page-wrapper">
    <SocialHead :image="getMetaImage" />
  </div>
</template>

<script>
export default {
  computed: {
    getMetaImage() {
      const imageSrc = this.$img('https://back.wildrockmtb.com/uploads/tanc_jump_51512c7cec.jpg', { width: 1000, height: 100, quality: 65 }, { provider: 'static' })
      console.log('Generated source: ', imageSrc)
      return imageSrc
    },
  },
}
</script>

When running nuxt generate the following is shown in the output:

Generated source: /_nuxt/image/9014ee.jpg

But when viewing the generated page, console displays:

Generated source:  https://back.wildrockmtb.com/uploads/tanc_jump_51512c7cec.jpg

This is also the url passed to the :image prop in the generated page, which is not the $img generated image.

How is it possible to obtain and use the correctly generated /_nuxt/image/*** url when using the $img function?

[tanc]

I should also note that in dev mode (yarn dev) the message in console is:

Generated source:  /_ipx/https://back.wildrockmtb.com/uploads/tanc_jump_51512c7cec.jpg?q=65&s=1000_100

[tanc]

Looking at the page source of the generated page output I can see the correct file path has been mapped and used (e.g. /_nuxt/image/9014ee.jpg). So it is only the client side mapping that is not currently working correctly, and only for an image directly produced with $img, the NuxtImg images are fine. So I'm wondering if there is something missing in the way I'm calling $img?

It appears to be a mapping problem seen on this line where there is no match in staticImageManifest for the image.url. Possibly the manifest isn't fully generated at that point?

[tanc]

@danielroe thanks for the fix, I've tested locally and can confirm the mapping now works on client side as well as the generated server output.