图片的本地相对路径需要使用require包裹

<template>
  <div>
    <div v-for="item in imgList" :key="item.id">
      <img :src="item.src" />
    </div>
  </div>
</template>
<script>
export default {
  name: "component3",
  data() {
    return {
      imgList: [
        { id: 1, src: require("../static/play.png") },
        { id: 2, src: require("../static/play.png") },
        { id: 3, src: require("../static/play.png") },
      ],
    };
  },
};
</script>
<style  scoped>
</style>

因为动态添加src被当做静态资源处理了，没有进行编译，使用require定义之后，就可以动态使用了。