使用vue将道具绑定到哈巴狗中的img src

Question

我创建了两个道具，其中第一个是我想要保留的 img src，另一个是条件。如果是真的，我只想显示 img。

props: {
    iconSrc: {
      type: String,
      default: ''
    }, 
  icon: {
  type: Boolean,
  default: true
},
  }

我正在使用 PUG，但我对此不是很熟悉，所以我不确定我做错了什么，我也是新手 Vue.js。出色地。然后我用里面的图像创建了这个div：

.factory-button__icon
        img(v-if="icon", src=iconSrc)

但是如果我使用开发人员工具检查代码，图像上没有 src。如果我从 src 中删除“iconSrc”并将其留空，它会显示在 de img src 的开发者工具上。

Answer 1

我认为 pug 反编译正在删除 src 属性。

var app = new Vue({
  el: "#app",
  data: {
    icon:true,
    iconSrc: 'https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg',
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img v-if="icon" src=iconSrc width="100" />
  <img v-if="icon" :src="iconSrc" width="100" />
</div>

使用vue将道具绑定到哈巴狗中的img src

Bind a prop to img src in pug using vue

vue.js

pug