ts在工具类里封装动态导入多张图片的方法
时间: 2023-11-28 16:47:54 浏览: 49
你可以在工具类里封装一个动态导入多张图片的方法,以下是一种可能的实现方式:
```typescript
/**
* 动态导入多张图片
* @param paths 图片路径数组
* @returns Promise对象,resolve时返回一个包含所有图片的HTMLImageElement数组
*/
export function importImages(paths: string[]): Promise<HTMLImageElement[]> {
return Promise.all(
paths.map(path => {
return new Promise<HTMLImageElement>((resolve, reject) => {
const img = new Image();
img.onload = () => {
resolve(img);
};
img.onerror = () => {
reject(`Failed to load image: ${path}`);
};
img.src = path;
});
})
);
}
```
这个方法接收一个图片路径数组,返回一个Promise对象。在方法内部,我们使用了`Promise.all`来并行加载所有图片。对于每个图片路径,我们创建一个新的`Image`对象,并在其`onload`回调函数里resolve Promise,如果出现错误则reject Promise。最后,我们返回一个包含所有图片的HTMLImageElement数组。
阅读全文