Archive.getBlob always returns undefined

[JevanWu]

Hi,

I want to get the images of the ePub file. My code is like

async function getImages(file:File) {
  const buffer = await file.arrayBuffer();
  const epub = ePub({})
  await epub.open(buffer)

  const resources:any = await epub.loaded.resources
  const assets:any = await resources.assets
  const archive:Archive = epub.archive

  assets.forEach((asset:Asset) => {
    if (asset.type == 'image/jpeg') {
      archive.getBlob(asset.href).then((blob:Blob) => {
          console.log("blob:" + blob)
      })
    }
  });
}

However, I always got undefined when invoking the getBlob method. Is there something wrong? Is there a better way to get images? Any help would be appreciated. Thanks

cc @fchasen

[johnfactotum]

The getBlob() method requires an absolute path, and it must start with a leading slash. The path given by resources.assets, however, can be, and often is, relative to the package document (the .opf file).

For example, take the first image from the Moby Dick example:

book.resources.assets.find(x => x.type === 'image/jpeg').href
// => "images/9780316000000.jpg"

book.archive.getBlob('images/9780316000000.jpg') // `undefined`
book.archive.getBlob('/OPS/images/9780316000000.jpg') // works

To work around this, you need to first get book.container.packagePath. Then resolve the paths of the assets relative to this path. And make sure it starts with a leading slash. See also #1084, which is similar to this.