Webpack resolve image

[PrimozRome]

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]

Hi,
Webpack do not resolve assets for any package placed in node_modules, you can try importing the non-compiled version of vue-avatar

import Avatar from 'vue-avatar/src/Avatar'

If this doesn't work, I will definitely check Nuxt.js since this could be a configuration issue

[PrimozRome]

@saintplay tried what you suggested but no change...

I don't think there is problem in Nuxt. As I mentioned this works:

<img src="~/assets/img/profiles/test.png">

while this doesn't

<avatar src="~/assets/img/profiles/test.png">

[saintplay]

I didn't notice before, but did you pass username as a prop?

<avatar
    username="Test Profile"
    src="~/assets/img/profiles/test.png"
/>

[PrimozRome]

Yeah I do pass usernameas well as a prop. But if I pass src as prop as well then initials are deleted and I get just blank coloured avatar. No initials no image.

Then I tried removing passing username as a prop, and just leave src. Then I get following error:

TypeError: Cannot read property 'split' of undefined
    at VueComponent.initial (Avatar.vue:110)
    at VueComponent.boundFn [as initial] (vue.runtime.esm.js:182)
    at VueComponent.userInitial (Avatar.vue:103)
    at Watcher.get (vue.runtime.esm.js:2877)
    at Watcher.evaluate (vue.runtime.esm.js:2984)
    at VueComponent.computedGetter [as userInitial] (vue.runtime.esm.js:3261)
    at VueComponent.mounted (Avatar.vue:56)
    at callHook (vue.runtime.esm.js:2661)
    at Object.insert (vue.runtime.esm.js:3522)
    at invokeInsertHook (vue.runtime.esm.js:5465)

<avatar 
          :rounded="false"
          :size="60"
          backgroundColor="#0d111f"
          src="~/assets/img/profiles/test.png">
</avatar>

[saintplay]

The username is required, the problem here is the path resolution for the image, I will dig into this the weekend for sure.
Meantime you might want to check vue official webpack template http://vuejs-templates.github.io/webpack/static.html since "Real" Static Assets maybe is what you wanna use

[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') }})

[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!