如何在抽屉组件的Vue / Quasar中更改图片？

如何解决如何在抽屉组件的Vue / Quasar中更改图片？

我认为这样做会更容易，但是坚持下去。概念是我有抽屉（MainLayout组件）所在的图片。我想做的是在不同的页面上在抽屉中显示不同的图像。

这是一个抽屉：

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

好吧，我确实喜欢这样，但是不起作用

  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';
    }
  }

我收到错误消息

获取http：// localhost：8081 /〜assets / drawer / wbPortfolio.png [HTTP / 1.1 404找不到2ms]

显然没有图片。

我猜src认为它是网址。那我应该把所有图片都当作网址吗？还是有其他解决方案？

解决方法

在Webpack中，指向图片的相对路径被视为模块dependency。所以您需要的是：

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