vue3 中如何动态加载本地图片资源

在untils文件中加入getImageUrl方法

export const getImageUrl = (name:string,type:string='png') => {
  return new URL(
    // 本地资源路径
    `/src/assets/images/${name}.${type}`,
    import.meta.url
  ).href;
};

在需要动态加载的vue文件中引入使用

<script lang="ts" setup>
  import { getImageUrl }  from '@/utils/index'
</script>
<template>
    <el-image
        style="width: 50px;height:42px"
        :src="getImageUrl('logo')"
        :fit="'fit'"></el-image> 
</template>