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

Question

我在一个Vue项目上工作，实际上我试图将img src属性绑定到数据值，然后我使用setInterval函数动态更改url每次调用函数，但当我运行页面时，我得到一个错误就像

属性或方法“源”不是在实例上定义的，而是在呈现过程中引用的。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

发现于

所以我的问题是，当setInterval函数调用相关函数时，我如何进行这种绑定并看到图像的变化

我的代码是

<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

我举一个简单的例子：

<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>

代码的问题可能是“ex”变量的类型。使用整数值尝试以下操作：

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

其他事情，尝试在模板中声明没有"this"：

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