如何将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>