How to change picture in Vue / Quasar in drawer component?

Question

I thought it will be easier to do, but stuck with it. The concept is I have drawer (MainLayout component) where is included picture. What I'm trying to do is on different pages show different image inside drawer.

Here is a drawer:

<q-drawer
      width="200"
      show-if-above
      behavior="desktop"
      bordered
    >

<!--      The Image-->
        <q-img
          alt="Portfolio Image"
          width="100"
          height="100"
          class="absolute-bottom-left"
          :src="pic"/>
<!--      End Image-->

</q-drawer>

Well, I did like this but it doesn't work

  data () {
    return {
      pic: '~assets/drawer/wbPortfolio.png',
    }
  },
  watch: {
    '$router.name': function(){
        if(this.$route.name === 'main')
          this.pic = '~assets/drawer/wbPortfolio.png';
        if(this.$route.name === 'resume')
          this.pic = '~assets/drawer/wbPortfolio2.png';
    }
  }

I'm getting error as

GET http://localhost:8081/~assets/drawer/wbPortfolio.png [HTTP/1.1 404 Not Found 2ms]

And obviously no picture is showing.

I'm guessing src thinks that it's url. So should I make all pictures as urls? Or is there other solution?

Answer 1

In Webpack, relative path to a picture treated as module dependency. So what you need is:

this.pic = require(`../assets/drawer/wbPortfolio.png`);