ts在工具类里封装导入本地图片的方法

以下是 TypeScript 封装导入本地图片的方法示例：

export const importImage = (file: File): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      resolve(reader.result as string);
    };
    reader.onerror = (error) => {
      reject(error);
    };
  });
};

使用方法：

importImage(file).then((imageUrl) => {
  // 处理导入成功后的逻辑
}).catch((error) => {
  // 处理导入失败后的逻辑
});

其中，`File` 是 JavaScript 内置的文件对象，用于表示从文件输入框中选中的文件。`FileReader` 是用于读取文件内容的对象，`readAsDataURL` 方法可以将文件内容读取为 base64 编码的字符串。最终返回的是一个 Promise 对象，可以在 `then` 方法中获取到导入成功后的图片地址，或者在 `catch` 方法中获取到导入失败的错误信息。

相关问题

ts在工具类里封装动态导入本地图片的方法

在 TypeScript 中，可以使用 `import` 语句动态导入本地图片。具体实现如下：

/**
 * 将指定路径下的图片动态导入为 base64 格式的字符串
 * @param imagePath 图片路径，相对于项目根目录
 * @returns Promise<string> 返回 base64 格式的字符串
 */
export async function importImage(imagePath: string): Promise<string> {
  try {
    const imageModule = await import(`../${imagePath}`);
    const imageBlob = await fetch(imageModule.default).then((response) => response.blob());
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onloadend = () => {
        const base64String = reader.result as string;
        resolve(base64String);
      };
      reader.readAsDataURL(imageBlob);
    });
  } catch (error) {
    console.error(error);
    return '';
  }
}

这里通过 `import` 语句动态导入了指定路径下的图片模块，然后使用 `fetch` 函数获取图片的二进制数据，并将其转换为 `Blob` 对象。接着使用 `FileReader` 对象将 `Blob` 对象转换为 base64 格式的字符串，最后返回该字符串。需要注意的是，这里使用了 `Promise` 对象来异步处理导入和读取图片的过程，并且在发生异常时返回了空字符串。

ts在工具类里封装动态导入图片的方法

在 TypeScript 中，可以使用 `import()` 方法来实现动态导入图片。下面是一个简单的工具类示例，封装了动态导入图片的方法：

/**
 * 动态导入图片
 * @param imageUrl 图片的 URL
 * @returns Promise 返回一个包含图片元素的 Promise 对象
 */
export async function loadImage(imageUrl: string): Promise<HTMLImageElement> {
  const image = new Image();
  return new Promise((resolve, reject) => {
    // 设置图片加载成功的回调函数
    image.onload = () => {
      resolve(image);
    };
    // 设置图片加载失败的回调函数
    image.onerror = reject;
    // 开始加载图片
    image.src = imageUrl;
  });
}

这个工具类中的 `loadImage` 方法接收一个图片 URL 参数，并返回一个包含图片元素的 Promise 对象。在方法内部，使用 `new Image()` 创建一个新的图片元素，然后为 `onload` 和 `onerror` 事件分别设置加载成功和加载失败的回调函数。最后，调用 `image.src` 开始加载图片。

使用该工具类，可以在项目中方便地动态导入图片，例如：

import { loadImage } from './utils';

async function loadAndShowImage() {
  const imageUrl = 'https://example.com/image.png';
  const image = await loadImage(imageUrl);
  document.body.appendChild(image);
}

loadAndShowImage();

在上述代码中，我们使用 `loadImage` 方法动态导入一张图片，并将其添加到页面中。注意，在使用 `await` 关键字调用 `loadImage` 方法时，需要将其放在 `async` 函数中。