search

johnfactotum / foliate-js

Render e-books in the browser
https://johnfactotum.github.io/foliate-js/reader.html
MIT License
420 stars 60 forks source link

Cannot open fb2 book with external images #35

Closed 549531 closed 2 months ago

549531 commented 2 months ago

Currently, foliate only understands images of form^1:

<image xlink:href="#some-id"/>

However, FictionBook 2.0 standard allows images to have any URL^2. Such image is also valid:

<image xlink:href="https://example.org/cat.png"/>

But Foliate refuses to open a book with such an image. ("Book Cannot be Opened. An error occured.")

AIUI, the fix is simple: make function getImageSrc (fb2.js, line 74) return href verbatim if it does not start with #.

johnfactotum commented 2 months ago

AIUI, the fix is simple: make function getImageSrc (fb2.js, line 74) return href verbatim if it does not start with #.

It already does that, at line 78: https://github.com/johnfactotum/foliate-js/blob/4ef87c2ca779f86826a060af89236445b58cb541/fb2.js#L78

As an example, the following file opens fine for me:

<?xml version="1.0" encoding="UTF-8"?>
<FictionBook xmlns="http://www.gribuser.ru/xml/fictionbook/2.0" xmlns:xlink="http://www.w3.org/1999/xlink">
<body>
    <section>
        <image xlink:href="https://example.org/cat.png" />
    </section>
</body>
</FictionBook>

And the resulting src is also correct.

johnfactotum commented 2 months ago

Admittedly, there is still a bug for the edge case where if the file does contain an image with the id="undefined", it will show that image instead of the one intended, because getElementById(undefined) is the same as getElementById("undefined").

But your issue is probably unrelated to external images.

549531 commented 2 months ago

My bad, you are right. The problem happened because my .fb2 did not use namespaces: <image href="…"/>. Then href variable becomes null and line 74 throws. Same thing happens if the image has no href attribute at all.