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

Question

我认为这样做会更容易，但还是坚持了下来。这个概念是我有抽屉（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';
    }
  }

我收到错误消息

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

显然没有图片显示。

我猜 src 认为它是 url。那么我应该把所有图片都设为urls吗？或者有其他解决办法吗？

Answer 1

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

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

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

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

image

vue.js

src

quasar