Add class selector to b-avatar img tag for custom images in default slot instead of using element selector

Is your feature request related to a problem? Please describe…

We need to override b-avatar’s img tag to add a loading="lazy". Unfortunately, the img css in bootstrap-vue uses an element selector as .b-avatar-img img rather than a unique class for the image tag, so we have to duplicate the css code.

Describe the solution you’d like

It would be preferable for it to be a class selector rather than an element selector. Then we could override the image exactly how it works in bootstrap-vue.

  <b-avatar ...>
    <template v-if="src" #default>
      <img :src="src" class="copied-from-b-avatar-img"> <!-- current -->
      <img :src="src" class="b-avatar-img-element"> <!-- preferred  -->
    </template>

Describe alternatives you’ve considered

We currently have to copy the code from .b-avatar-img img to our system, which isn’t ideal or future proof.

[Hiws]

You could just wrap the <img> in a <span> with the class b-avatar-img. Should give the same result, except that there’ll be an additional span in the DOM.

<b-avatar>
  <template v-if="src" #default>
    <span class="b-avatar-img">
      <img loading="lazy" :src="src">
    </span>
  </template>
</b-avatar>

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!