时间戳

首页 > 解决方案 > 使用 vue 在 pug 中将 prop 绑定到 img src

vue.js - 使用 vue 在 pug 中将 prop 绑定到 img src

问题描述

我创建了两个道具，第一个是我要保留的 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 上。

标签： vue.jspug

解决方案

我认为哈巴狗反编译正在删除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>

推荐阅读