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

Posted 2023-02-23

【中文标题】未针对 Vue 组件 (Nuxt.js) 上的 props 样式属性处理引导图像资产

【英文标题】：Bootstrap image asset not processed for props style attribute on Vue Component (Nuxt.js)

【发布时间】：2020-03-02 11:04:47

【问题描述】：

我一直在尝试将图像资产的相对路径导入横幅组件。以下工作正常。

<b-img src="~/static/images/carousel1.jpg" />

在 html 上，我看到它呈现为这样

<div class="card-body"><img src="/_nuxt/static/images/carousel1.jpg"...

但是像这样的 v-bind 样式表示并没有捆绑图片

<b-img :src="imgSrc" :/>

我可以在 html 上看到 imgSrc 值正在传递但未由资产处理器编译

<div class="card-body"><img src="~/static/images/carousel1.jpg" ...

有没有一种方法可以显式触发这个编译？ require 似乎也不起作用。

<b-img :src="require(imgSrc)" :/>

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

【参考方案1】：

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

export default 
  data() 
    return 
      title: 'Image title'
    
  ,
  computed: 
    imgSrc() 
      // Relative to component directory
      return require('./image.png')
    
  

然后在你的模板中引用它：

<b-img :src="imgSrc" :/>

【参考方案2】：

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

<banner :imgSrc="imgSrc" ...

而在父级中的数据导出是这样的。

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

在绘制横幅的子组件中。

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

注意： require 需要来自组件/页面的相对路径（../static），而没有 require 我们可以使用绝对路径（~/static）。

【讨论】：

道具应该是:img-src而不是:imgSrc。

【参考方案3】：

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

【讨论】：

是的。这类似于 src="../static/images/carousel1.jpg" 。这里的挑战是通过像这样的 prop 变量 :src="require(imgSrc)" 不起作用！它看起来很简单但很棘手！

另外，我尝试像这样将 require 放在父组件（调用横幅组件） 好像不行！