Javascript 如何使用epub.js在HTML中显示epub书籍的封面？

我正在使用和Vue渲染Epub。我想显示几本epub书籍的封面图像，以便用户可以单击其中一本，然后查看整本书

没有关于如何做到这一点的文档，但是有几种方法表明这是可能的

首先是Book.coverUrl（）方法

请注意，我正在Vue模板中将

img

src

属性设置为等于

bookCoverSrc

。设置

this.bookCoverSrc

将自动更新

img

标签的

src

，并显示图像（如果

src

有效/解析）

上述方法不起作用<代码>url是

未定义的

奇怪的是，在

书

上直接出现了一个

封面

属性。因此，我尝试：

this.book = new Epub(this.epubUrl, {});
this.book.ready.then(() => {
  this.coverSrc = this.book.cover;
});

本书封面

解析为

OEBPS/@public@vhost@g@gutenberg@html@files@49010@49010-h@images@jpg

，所以当我将其设置为

src

时，至少在本地会导致请求

http://localhost:8080/OEBPS/@public@vhost@g@gutenberg@html@files@49010@49010-h@images@封面.jpg

，它将运行200s，但不返回任何内容。这可能是webpack dev server在这方面的一个怪癖，但如果我翻阅Chrome dev工具中的源代码，我也看不到任何迹象表明应该解析这样的URL

所以，医生帮不上忙。我在谷歌上搜索发现他们的代码是这样的

$("#cover").attr("src", Book.store.urlCache[Book.cover]);

有趣的是，码头上没有关于Book.store.urlCache的信息。正如所料，

urlCache

是

未定义的

，尽管

book.store

存在。我没有看到任何可以帮助我显示封面图片的东西

使用epub.js，如何显示epub文件的封面图像？请注意，简单地呈现epub文件的第一个“页面”（通常是封面图像）并不能解决我的问题，因为我想列出几个epub文件的封面图像

还要注意，我相信我使用的epub文件确实有封面图像。文件是和

编辑：我可能需要在

book.cover提供的url上使用。我这样做了，并尝试console.log它，但它是一个由奇怪编码的文本组成的大型博客，看起来像：

����

所以我认为这是一个直接的图像，我需要找到一种方法，以某种方式将其放到文档中

EDIT2：那个大的blobby blob是type:string，我不能
atob（）
或
btoa（）
它

EDIT3:Just
fetch
ing由
this.book.cover提供的url
返回my index.html，这是webpack dev server在不知道其他操作时的默认行为

EDIT4：下面是epub.js中的
book.coverUrl
的代码

    key: "coverUrl",
    value: function coverUrl() {
        var _this9 = this;

        var retrieved = this.loaded.cover.then(function (url) {
            if (_this9.archived) {
                // return this.archive.createUrl(this.cover);
                return _this9.resources.get(_this9.cover);
            } else {
                return _this9.cover;
            }
        });

        return retrieved;
    }

如果我使用
this.archive.createUrl（this.cover）
而不是
this.resources.get
，我实际上会得到一个功能URL，看起来像
blob:http://localhost:8080/9a3447b7-5cc8-4cfd-8608-d963910cb5f5
。我将尝试将其输入到
src
中，看看会发生什么
 发生这种情况的原因是源代码库epub.js中注释掉了
coverUrl
函数中正常工作的代码行，而编写了一行不正常工作的代码

因此，我不得不复制整个库，取消注释好代码，删除坏代码。现在，该函数正常工作

为此，请克隆整个项目。将该项目的
package.json
中的依赖项复制到您自己的。然后，将
src
、
lib
和
libs
文件夹复制到项目中的某个位置。找到一种方法来禁用放置这些文件夹的位置的
eslint
，因为项目使用
TAB
字符作为间距，这导致我的终端由于eslint爆炸而挂起

npm安装
这样，您的
node\u模块中就有了和
epub.js
依赖项

打开
book.js
。取消注释第661行，如下所示

      return this.archive.createUrl(this.cover);

      // return this.resources.get(this.cover);

并注释掉第662行

      return this.archive.createUrl(this.cover);

      // return this.resources.get(this.cover);

现在，您可以通过将
img
标记的
src
属性设置为
book.coverUrl（）
返回的URL来显示图像