Bootstrap 未针对 Vue 组件上的 props 样式属性处理图像资产 (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 似乎也行不通。

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

我的用例需要这种动态样式。

Answer 1

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

Answer 2

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

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 3

在调用（父）模板上，我使用了这个

<banner :imgSrc="imgSrc" ...

父类中的数据导出是这样的。

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

在绘制横幅的子组件中。

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

注意： require 需要一个来自 components/pages 的相对路径 (../static) 而没有 require 我们可以使用绝对路径 (~/static).

Bootstrap 未针对 Vue 组件上的 props 样式属性处理图像资产 (Nuxt.js)

Bootstrap image asset not processed for props style attribute on Vue Component (Nuxt.js)

vue.js

vue-component

asset-pipeline

nuxt.js

bootstrap-vue