Динамическая передача местоположения изображения в b-card Bootstrap-Vue, похоже, не работает?

В моем проекте мне нужно отобразить серию изображений, и я сохранил их пути в объекте конфигурации «mg»:

data() {
  return {
    el: "#about",
    img: {
      'buy': '../assets/buy.svg',
     }
  }
}

Я использую в своем шаблоне компоненты Bootstrap-Vue и пытаюсь создать b-карту для каждое изображение.

Моя проблема в том, что если я передаю путь непосредственно к img-srcproperty, он отображается. Однако, если я попытаюсь прочитать его из своего img объекта, изображение не отобразится.

Любые намеки на то, как решить эту проблему?

Следующий фрагмент кода шаблона иллюстрирует проблему:

<div id="lifecycle">
  <!-- prints correct path -->
  <p>{{img['buy']}}</p>

  <!-- shows the picture -->
  <b-card :title="img['buy']"
      img-src="../assets/buy.svg">
  </b-card>

  <!-- can not display the picture :( -->
  <b-card :title="img['buy']"
      :img-src="img['buy']">
  </b-card>
</div>

Когда я проверяю DOM, я вижу, что в случае, когда путь к изображению является строковым литералом, он разрешается в /static/img/buy.62e6a38.svg, а когда я передаю выражение, это неразрешенный путь, который передается компоненту , ../assets/buy.svg:

<div class="card">
 <img src="/static/img/buy.62e6a38.svg" class="card-img">
 <div class="card-body">
  <h4 class="card-title">../assets/buy.svg</h4> 
 </div>
</div>
<div class="card">
 <img src="../assets/buy.svg" class="card-img">
 <div class="card-body">
  <h4 class="card-title">../assets/buy.svg</h4>
 </div>
</div>

Это какая-то проблема с загрузчиком? Есть идеи, что я здесь делаю не так?


vue.js vuejs2 bootstrap-vue
person themathmagician    schedule 15.09.2018    source источник
comment
Я не вижу здесь ничего плохого. Но можно ли вместо img ['buy'] попробовать img.buy?   -  person zapping    schedule 15.09.2018
comment
Но, как я вижу из функции данных, путь к свойству изображения равен img.img.buy   -  person Max Sinev    schedule 15.09.2018
comment
Привет @MaxSinev, извините за тип - объект конфигурации - это просто img.buy (не img.buy). В моем шаблоне я печатаю все пути, и они правильные. Когда я добавляю путь в виде строкового литерала, изображение загружается. Когда я передаю его как выражение, изображение не загружается.   -  person themathmagician    schedule 15.09.2018
comment
Привет @zapping, пробовал с img.buy и img['buy'], но без разницы. Когда я печатаю значение выражения, оно дает правильный путь, но компонент начальной загрузки не принимает его. Я сам очень озадачен и задаюсь вопросом, может ли это быть какой-то проблемой с загрузчиком.   -  person themathmagician    schedule 15.09.2018
comment
Может быть, вам нужно снова загрузить тег изображения, чтобы он работал?   -  person Learner    schedule 16.09.2018

Ответы (1)


arrow_upward
2
arrow_downward

Когда вы используете путь img непосредственно в шаблоне, он будет правильно разрешен с помощью vue-loader в require("path/to/image.png"), также он переводит ваш путь к активу на что-то, связанное с производством, чтобы он работал правильно после сборки. Если вы хотите связать свойство пути из кода, вы должны помочь загрузчику разрешить путь с помощью require или import:

import buy from "../assets/buy.svg"
//... in component
data() {
   return {
       el: "#about",
       img: {
          buy
       }
   }
}

Или с требованием:

data() {
    return {
       el: "#about",
       img: {
          buy: require('../assets/buy.svg')
       }
   }
}

Источник по теме: Vue CLI 3 Docs

person Max Sinev    schedule 15.09.2018