vue实现动态切换图片src

通过计算属性搭配require实现。

功能： 定义一个定时器，每隔3秒随机生成一个文件名；通过计算属性根据文件名重新加载图片路径，从而实现定时随机切换图片的效果。

• 图片路径：/assets/images/，
• 图片名称分别为1.png、2.png …20.png。

代码：

<template>
  <div>
    <el-image :src="getImageUrl"></el-image>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: '1'
    }
  },
  created () {
    setInterval(() => {
        let randomNum = Math.random() * 20;
        let number = Math.floor(randomNum) + 1;
        this.name = '' + number;
    }, 3000);
  },
  computed: {
    getImageUrl () {
      return require('@/assets/images/' + this.name + '.png');
    }
  }
}
</script>