how to bind img src attribute to dynamic url in vue.js

Question

I am working on a Vue project, actually I am trying to bind img src attribute to data value and then I am using a setInterval function to change the url dynamically everytime the function is being called but when I run the page, I am getting an error like

Property or method "source" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

so my question is how I could make this kind of binding and see the image changes when the related function is being called by setInterval function

My code is

<template>
  <v-card elevation="5" class="mx-auto mt-2" shaped max-width="800">
    <v-img
      class="white--text align-end"
      gradient="to bottom left, rgba(0,0,0,0.2), rgba(0,0,0,0.2), rgba(255,0,0,0.4), rgba(0,0,0,0.8)"
      height="500px"
      aspect-ratio="1.7"
      :src="this.source"
    >
      <v-card-title class="overline">
        <span class="red--text darken-4">
          LIVE
          <v-icon class="red--text darken-4 ma-2" size="3">mdi-circle</v-icon>
        </span>SULTANBEYLI, ISTANBUL | 06/13/2020 - 13.35 PM
      </v-card-title>
    </v-img>
  </v-card>
</template>
<script>
export default {
  name: "Camera",
  sockets: {
    frames(data) {
      console.log(data);
    }
  },
  methods: {
  },
  mounted() {
     setInterval(() => {
        this.ex += 1;
        console.log(this.source)


    }, 60000); 
  },
  data: () => ({
    ex: "1",
  })
};

Please show your code.

Gabriel Willemann
– Gabriel Willemann

2020-06-15 18:16:54 +00:00
Commented Jun 15, 2020 at 18:16 — Gabriel Willemann
– Gabriel Willemann, Commented Jun 15, 2020 at 18:16
I edited with the code. @GabrielWillemann

user13171802
– user13171802

2020-06-15 18:23:02 +00:00
Commented Jun 15, 2020 at 18:23 — user13171802
– user13171802, Commented Jun 15, 2020 at 18:23

Gabriel Willemann · Accepted Answer · 2020-06-15 18:31:58Z

0

I do a minimal example:

<template>
  <div>
    <img :src="image" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    image: null,
    imageCode: 1,
  }),
  mounted() {
    setInterval(() => {
      if (this.imageCode == 1) {
        this.image =
          'https://smaller-pictures.appspot.com/images/dreamstime_xxl_65780868_small.jpg';
        this.imageCode = 2;
      } else {
        this.image =
          'https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png';
        this.imageCode = 1;
      }
    }, 2000);
  },
};
</script>

Probably the problem of your code is type of "ex" variable. Try this with integer value:

  data: () => ({
    ex: 1,
    source: "http://aua.0xseck.fun/tr/1/1.jpg"
  })

Other thing, try to declare in template without "this":

<v-img :src="source"></v-img>

edited Jun 15, 2020 at 18:31

answered Jun 15, 2020 at 18:25

Gabriel Willemann

1,9211 gold badge9 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user13171802 Over a year ago

Thanks bro, the problem caused by the type of ex variable, I just missed that point to change as integer value. :)

Gabriel Willemann Over a year ago

Please accept this answer and this will help others people. How to accept an answer?

Collectives™ on Stack Overflow

how to bind img src attribute to dynamic url in vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related