Question

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

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

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

我的问题是，如果我将路径直接传递到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卡似乎不起作用？

1 个答案: