带有 Epub 图像的 iBook 脚注 Aside 标签答案

【问题标题】：iBook Footnote with Images for Epub Aside tag带有 Epub 图像的 iBook 脚注 Aside 标签
【发布时间】：2013-06-27 23:28:28
【问题描述】：

我正在尝试让脚注包含图像。

弹窗有效，图片有大小合适的空间，但图片本身不显示。

这是一个屏幕截图，后面是代码。

<?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>

【问题讨论】：

您确认图片在图书正文内容中正确加载了吗？

标签： image epub ibooks

【解决方案1】：

不久前我遇到了完全相同的问题。图像不会加载到 iBooks 中的某些旁白中，但会加载到其他旁白中。

在 iPad1 上运行它支持的最后一个版本的 iBooks，我能够通过 CSS 将图像插入为 div 的背景 url，并在其中设置尺寸，但只能使用内联样式来显示图像。我没有附上代码，因为它永远不应该被实际使用。

带有更新版本 iBooks 的 iPad3 仍然存在错误，并且不定期显示背景图像，但解决方法太丑陋了，我还是放弃了它。我相信这是 iBooks 中的一个错误。

【讨论】：

不想这么说，但是你能不能提供你用来让它工作的代码，不管它有多hacky？ :)
@Matt Mc，很确定我现在已经删除了这本书，因为它只是为了测试。可能我的答案也应该更新，因为 iBooks 软件可能已经发生了变化。不过一两周内没有机会这样做，与此同时，您可以尝试将具有内联样式的 div 放入上面的鼠标代码中，看看它是如何工作的。

【解决方案2】：

您可以使用data URI 在 iBooks for OSX 中使用此功能：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

这也适用于内联 SVG。

此外，内联 background-image: url(...) 属性对我来说也很好用。在 iOS 上的 iBooks 4.8 和 3.0.2 以及 OSX 上的 1.5 上进行了测试。

【讨论】：

【解决方案3】：

按照以下步骤操作：

将图像格式 *.jpg 转换为 *.SVG（或）从 PDF 中重新裁剪图像并另存为 SVG（使用 illustrator）
在编辑器中打开图片文件
复制 SVG 编码
粘贴到对应的图片位置。

【讨论】：