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

编程问答 2022-06-11

问题描述

我认为这样做会更容易，但是坚持下去。概念是我有抽屉（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认为它是网址。那我应该把所有图片都当作网址吗？还是有其他解决方案？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

imageimagequasarsrcvue.js