Search code examples
imageepubibooks

iBook Footnote with Images for Epub Aside tag

I am trying to get the footnote to include an image.

The pop-up works, there is a space of the right size for the image, but the image itself is not displayed.

Here is a screen shot followed by the code.

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <title>test</title>
</head>

<body>
  <div>
    <p>The <a epub:type="noteref" href="#test">star</a> looks blue.</p>
  </div>

  <aside epub:type="footnote" id="test">
    <p><img alt="" src="../Images/Mario.png" />The image should be above this line</p>
  </aside>
</body>
</html>
Solution

  • i was having the exact same problem a while ago. images would not load into some of the asides in iBooks, but would in others.

    on iPad1 running the last version of iBooks that it supported, i was able to display the images by inserting them via CSS as a background url of a div with set dimensions inside of the aside, but only with inline styles. i'm not attaching the code because it should never actually be used.

    iPad3 with a more recent version of iBooks continued to be buggy, and not display the background images periodically, but the workaround was so ugly that i abandoned it anyway. i believe this is a bug in iBooks.