Актив изображения начальной загрузки не обработан для атрибута стиля реквизита в компоненте Vue (Nuxt.js)

Question

Я пытался по отдельности импортировать относительный путь к активу изображения в компонент баннера. Следующее работает просто отлично.

<b-img src="~/static/images/carousel1.jpg" alt="Samyojya Consultants banner"/>

В html я вижу, что оно отображается как

<div class="card-body"><img src="/_nuxt/static/images/carousel1.jpg"...

Но такое представление стиля v-bind как это несвязать изображение

<b-img :src="imgSrc" :alt="title+'banner'"/>

В html я вижу, что значение imgSrc передается, но не компилируется процессором ресурсов

<div class="card-body"><img src="~/static/images/carousel1.jpg" ...

Есть ли способ, которым мыможет явным образом вызвать эту компиляцию? require , похоже, тоже не работает.

Этот динамический стиль действительно нужен для моего сценария использования.

Answer 1

Создайте вычисляемую подпорку (или метод, или аналог), чтобы разрешить (указать) относительный путь:

export default {
  data() {
    return {
      title: 'Image title'
    }
  },
  computed: {
    imgSrc() {
      // Relative to component directory
      return require('./image.png')
    }
  }
}

И затем сослаться на это в своем шаблоне:

<b-img :src="imgSrc" :alt="title+' banner'"/>

Answer 2

На вызывающем (родительском) шаблоне я использовал это

 <banner :imgSrc="imgSrc" ...

И экспорт данных в родительский шаблон выглядит следующим образом.

export default {
  data: function(){
    return {
      imgSrc:require('../static/images/carousel2.jpg')
    }
  },
... 

В дочернем компоненте, где рисуется баннер.

<b-img :src="imgSrc"...

Примечание: require требует относительного пути (../static) от компонентов /страницы без необходимости мы можем использовать абсолютные (~ / статические).

Answer 3

<b-img :src="require('../static/images/carousel1.jpg')" alt="Samyojya Consultants banner"/>