preload do not work with $img utility

[KStenK]

Hello

I'm unsure if I am doing something wrong or why there is no preload link in the header when I'm using the $img utility.

<template>
  <Tutorial :style="backgroundImage" />
</template>

<script>
export default {
  computed: {
    backgroundImage() {
      const img = this.$img("bg.png", { format: "webp", preload: true });
      return {
        backgroundImage: `url('${img}')`,
      };
    },
  },
};
</script>

Sandbox Project: https://codesandbox.io/s/frosty-microservice-p2he4r

Dependencies:

"nuxt": "^2.15.8"
"@nuxt/image": "^0.7.1"

[asonnleitner]

The preload is added by the nuxt-img component when the prop is set to true. Not the utility itself.

https://v1.image.nuxtjs.org/components/nuxt-img#preload

[KStenK]

Alright,

For anyone who needs this, the workaround for myself looks like this:

<template>
  <Tutorial :style="backgroundImgStyle" />
</template>

<script>
export default {
  head() {
    return {
      link: [
        {
          rel: 'preload',
          as: 'image',
          href: this.backgroundImgUrl
        },
      ]
    }
  },

  computed: {
    backgroundImgUrl() {
      return this.$img('bg-img.jpg', {format: 'webp'})
    },
    backgroundImgStyle() {
      return {
        backgroundImage: `url('${this.backgroundImgUrl}')`
      }
    }
  }
}
</script>