使用本地的随机生成的图片，随机生成的变量名称进行显示图片（拼接变量名，并进行展示图片）

需求：本地的图片然后随机使用其中的某一张。

需要随机使用本地的某张图片，
有4张图片这里就显示3，因为随机的数字可能是（0，1，2，3）

const imgNum = Math.round(Math.random() * 3); 

//所以如果定义的名字里面没有0（没有yan0）所以就需要+1

const imgName = "yan" + (imgNum + 1); 
//主要是为了随机生成一个数字拼接成我所需要的变量名，也就是图片引入名称

重点：imgName本身是个变量（imgName =“yan1”），你是不可以直接使用的（不信的话你可以自己试一下，直接去调用imgName），因此你就需要创建一个对象this.imageSrc然后点击他的属性出来。

return this.imageSrc[imgName];

//引入的图片，注意看我这里的图片名称
import yan1 from "@/assets/image/yan1.jpg";
import yan2 from "@/assets/image/yan2.jpg";
import yan3 from "@/assets/image/yan3.jpg";
import yan4 from "@/assets/image/yan4.jpg";

 data() {
    return {
      imageSrc: {
        yan1,
        yan2,
        yan3,
        yan4
      }
   }
}

完整代码来了

import yan1 from "@/assets/image/yan1.jpg";
import yan2 from "@/assets/image/yan2.jpg";
import yan3 from "@/assets/image/yan3.jpg";
import yan4 from "@/assets/image/yan4.jpg";
import "./captcha.scss";

export default {
  data() {
    return {
      imageSrc: {
        yan1,
        yan2,
        yan3,
        yan4,
      }
   }
}
methods: {
    getRandomImgSrc() {
      const imgNum = Math.round(Math.random() * 5); 
      const imgName = "yan" + (imgNum + 1); 
      return this.imageSrc[imgName];
    }
}