动态传递图片位置到Bootstrap-Vue的b-card好像不行？

Question

在我的项目中，我需要显示一系列图像，我将它们的路径存储在配置对象ìmg`:

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

我在我的模板中使用 Bootstrap-Vue 组件，我尝试为每个图像创建一张 b-card。

我的问题是，如果我将路径直接传递给 img-src属性，它就会显示出来。但是，如果我尝试从我的 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>

这是某种加载程序问题吗？有什么想法，我在这里做错了什么？

Answer 1

当您直接在模板中使用 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')
       }
   }
}

动态传递图片位置到Bootstrap-Vue的b-card好像不行？

Passing an image location dynamically to Bootstrap-Vue's b-card doesn't seem to work?

vue.js

vuejs2

bootstrap-vue