使用jszip在React中读取和显示zip文件中的图像

Question

我有一个zip文件，其中包含一些图像，mp4和一个文本文件。我正在阅读的文本文件是这样的：

      jszip
      .loadAsync(arrayBuffer)
      .then(({ files }) => {
        const txtFiles = Object.entries(files).filter(([fileName]) =>
          fileName.endsWith('.txt'),
        );

        if (!txtFiles.length) {
          throw new Error('No txt files found in archive');
        }

        return txtFiles
          .sort(([a], [b]) => a.length - b.length)[0][1]
          .async('string');
      })

并且工作正常。但是我也需要获取文件中的所有图像/ mp4，所以我尝试了：

    jszip
      .loadAsync(arrayBuffer)
      .then(({ files }) => {
        const jpgs = [];
        const mediaFiles = Object.entries(files).filter(([fileName]) =>
          fileName.endsWith('.jpg'),
        );

        if (!mediaFiles.length) {
          throw new Error('No media files found in archive');
        }

        mediaFiles.forEach(i => {
          blob = new Blob([i], {
            type: 'image/jpeg',
          });

          img = new Image();
          img.src = URL.createObjectURL(blob);
          jpgs.push(img);
        });

        return jpgs;
      })

现在，当我尝试渲染jpgs数组时，我得到了一堆像这样的img元素：

<img alt="img" src="blob:http://localhost:3000/d64b16c7-aa9c-49a7-96cc-ed4eafc6a054">

但没有图像/图像图标损坏。我做错了吗？

Answer 1

显然我没有正确使用Blob，由于Loris Bettazza，以下代码为我解决了它：

mediaFiles.forEach(([, image]) => {
  image.async('blob').then(blob => {
    const img = new Image();
    img.src = URL.createObjectURL(blob);
    document.body.prepend(img);
  });
});