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

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

Answer 2

创建一个计算的道具（或方法，或类似的东西）来解析（要求）相对路径：

Answer 3

在调用方（父）模板上，我使用了此