Angular中使用TypeScript通过图片URL获取宽高的问题

算力阿峰

2026-9-26

问题根因

img.onload属于异步回调事件，仅在图片资源完全加载完成后才会触发执行。当前代码的return语句是同步执行逻辑，触发时onload回调还未运行，width和height未被赋值，因此返回undefinedxundefined。
另外当前代码没有绑定onerror事件，图片加载失败时无异常捕获逻辑，也没有处理缓存场景下的触发顺序问题。

解决方案

通过Promise封装图片加载的异步逻辑，改造后的方法返回Promise实例，调用方通过异步方式获取尺寸结果。

改造后的方法代码

getImageSize(image: string): Promise<string> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 先绑定事件再赋值src，避免缓存图片触发onload时还未绑定回调的问题
    img.onload = (event) => {
      const targetImg = event.currentTarget as HTMLImageElement;
      resolve(`${targetImg.width}x${targetImg.height}`);
    };
    img.onerror = (error) => {
      reject(`图片加载失败: ${error?.toString() || '未知错误'}`);
    };
    img.src = image;
  });
}

调用方法

方式1：async/await（推荐）

// 调用的函数需添加async修饰符
async getSizeDemo() {
  try {
    const imageSize = await this.getImageSize('替换为你的图片URL');
    console.log(imageSize); // 此处可拿到正确的尺寸拼接结果
  } catch (err) {
    console.error(err);
  }
}

方式2：then回调

getSizeDemo() {
  this.getImageSize('替换为你的图片URL')
    .then(imageSize => {
      console.log(imageSize); // 此处可拿到正确的尺寸拼接结果
    })
    .catch(err => {
      console.error(err);
    });
}