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

【问题标题】：How to change picture in Vue / Quasar in drawer component?如何在抽屉组件中更改 Vue / Quasar 中的图片？
【发布时间】：2020-09-27 05:21:31
【问题描述】：

我认为这样做会更容易，但还是坚持了下来。这个概念是我有抽屉（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。那么我应该将所有图片都设为网址吗？还是有其他解决办法？

【问题讨论】：

标签： image vue.js src quasar

【解决方案1】：

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

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

【讨论】：