Multi tool use

Vue.js Webpack: how to return an an asset path from :src binded to to a method

In my component template , I have :

<v-avatar :tile="tile" color="grey lighten-4" class="layout justify-start ml-0" slot="activator" size="48px">
<img class="img-circle" :src="avatarUrl" alt="avatar">
</v-avatar>


the src tag is bound to the avatarUrl method

methods: {
avatarUrl () {
if (this.user.photoUrl !== null) {
return this.user.photoUrl
} else {
return 'https://avatars0.githubusercontent.com/u/9064066?v=4&s=46
}
},


this works well... BUT if I want to use an image from the src/assets/images then the image is not used . ( no error messagecompiling or executing )

methods: {
avatarUrl () {
if (this.user.photoUrl !== null) {
return this.user.photoUrl
} else {
return '../../assets/images/default-avatar.jpeg'
}
},


I also tried to use require()

return require('../../assets/images/default-avatar.jpeg')


UPDATE

I this case I get an error

This relative module was not found:

* ../../assets/images/default-avatar.jpeg in ./node_modules/cache
loader/dist/cjs.js?"cacheDirectory":"/Users/myself/Developments/my-
project/node_modules/.cache/cacheloader"}!./node_modules/babel
loader/lib!./node_modules/vue-loader/lib/selector.js
type=script&index=0!./src/components/Member/Section1.vue


I guess that during compilation webpack only checks urls in the template ? what about the script ??

thanks for feedback

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.