Блог

Главная - Вопросы по программированию - Как изменить изображение в Vue / Quasar в компоненте ящика?

Как изменить изображение в Vue / Quasar в компоненте ящика?

#image #vue.js #src #quasar

#изображение #vue.js #Src #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 /~активы/ящик/wbPortfolio.png [HTTP/1.1 404 не найден 2 мс]

И, очевидно, изображение не отображается.

Я предполагаю, что src считает, что это url. Итак, я должен сделать все изображения в виде URL-адресов? Или есть другое решение?

Ответ №1:

В Webpack относительный путь к изображению рассматривается как зависимость от модуля. Итак, что вам нужно:

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