如何将 img src 属性绑定到 vue.js 中的动态 url

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",
  })
};

Answer 1

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>