Can it work with dynamic attributes?

[brybrant]

Steps to Reproduce

Hi. I have images with dynamic sources like this:

<template>
  <img
    class="lazyload"
    :src="`~/assets/${month}--low.jpg`"
    :data-src="`~/assets/${month}.jpg`"
  >
</template>

<script>
export default {
  data () {
    return {
      month: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'][new Date().getMonth()]
    }
  }
}
</script>

Can nuxt-lazysizes be made to work with dynamic attributes like this?

Current Behavior

Attribute is not processed

Expected Behavior

Process dynamic attributes

Additional Details

No response

Version

1.4.3

[ivodolenc]

Hi, have you tried extendAssetUrls option?

// nuxt.config.js

export default {
  lazySizes: {
    extendAssetUrls: {
      img: ['src', 'data-src'],
    }
  }
}

[brybrant]

Yep, I tried that. It works when I set the attribute normally (not dynamic) like:

<img class="lazyload" data-src="~/assets/example.png">

If I want to use dynamic attribute (with colon) then it only works if I use require() like:

<img class="lazyload" :data-src="require('~/assets/example.png')">

I will just move my images to the /static folder instead of the /assets folder to make things simple.