how to pass mixin variuable as a path in image directly

Question

I have a mixins variable known as imageUrl which I want to pass in image tag directly can someone tell me how to do that I have tried via :src="mixins_name" but it did not work

tuhin47 · Answer 1 · 2021-01-07T15:43:22.737

0

You need to set the mixin variable inside data. Then inherit the mixin. Codesandbox example for importing from another file.

var mixin = {
  data: function() {
    return {
      imgURL: "https://picsum.photos/200/200",
    }
  }
}

new Vue({
  mixins: [mixin],
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img :src="imgURL" />
</div>

edited Jan 07 '21 at 15:43

answered Jan 07 '21 at 15:19

tuhin47

5,172
4
19
29

will this work if mixin is created in another file – Bhumit 070 Jan 07 '21 at 15:28
definitely. You just need to import the mixin property. – tuhin47 Jan 07 '21 at 15:30
import mixins from "@/mixins/global"; export default { name: "Layout", components: { Header, Aside, }, mixins: [mixins], I have imported mixins like this but it is not working – Bhumit 070 Jan 07 '21 at 15:39
I share a codesandbox link into the answer as well. please check it out – tuhin47 Jan 07 '21 at 15:43

how to pass mixin variuable as a path in image directly

1 Answers1