Search code examples
vue.jspug

Bind a prop to img src in pug using vue

I create two prop where the first one is the img src that I want to keep and the other one is a condition. I only want to show the img if it's true.

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

And I'm using PUG but i'm not very familiar with this, so I don't know for sure what I am doing wrong, I'm also new using Vue.js. Well. then I created this div with the image inside:

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

But If I inspect the code with developer tools, there's no src on the image. If I remove "iconSrc" from src and just leave it empty, it shows on developer tools de img src.

Solution

  • I think pug trans-compiling is removing src attribute.

    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>