vue中动态使用本地图片

在vue中动态使用本地图片，使用require，然后图片的地址是动态变化的，在require中使用图片地址，不能直接使用变量，需要带字符串拼接

<template>
  <div>
    <img :src="curImgIcon" alt="" />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class BussinessImgIcon extends Vue {
  @Prop({ default: "" })
  imgIcon?: string;

  get curImgIcon(): string {
    return this.imgIcon ? require("@/assets/images/" + this.imgIcon) : "";
    return this.imgIcon ? require("@/" + this.imgIcon) : ""; // 报错
    return this.imgIcon ? require(this.imgIcon) : ""; // 报错
  }
}
</script>

图片应用场景：如果我们的页面代码是从后端接口返回的，然后使用eval()执行后使用动态组件，动态组件中使用了本地图片，那么可以在项目中增加一个图片组件，动态使用本地图片