Webpack resolve image

I am trying to add image to the src attribute, but it’s not working… How does avatar resolve images? I am working with Nuxt.js which uses Webpack to resolve images.

Does not work <avatar src="@/assets/img/profiles/test.png">

works <avatar src="https://eliep.github.io/vue-avatar/static/darth-vader.png">.

If I do this <img src="@/assets/img/profiles/test.png">, the image is displayed.

Thanks

[saintplay]

Just in case someone is suffering because of this:

    <avatar
      username="Vader"
      :src="require('~/assets/img/vader.png')"
    />

Using require will do the job!

[saintplay]

I just checked Nuxt documentation https://nuxtjs.org/guide/assets/ and you can try using the require statement

<template>
  <img src="~/assets/image.png">
</template>

It will be compiled into:

createElement('img', { attrs: { src: require('~/assets/image.png') }})