使用 Blob 作为 iframe 源和加载位于子目录中的 img src 图像时遇到问题答案

【问题标题】：Using a Blob as iframe source and a trouble with loading img src images located in a subdirectory使用 Blob 作为 iframe 源和加载位于子目录中的 img src 图像时遇到问题
【发布时间】：2020-05-28 12:08:19
【问题描述】：

编辑：我在这里添加了问题的实时版本： https://www.lieksa.info/demot/stackoverflow/blob_issue/problem.html

我正在尝试使用 Javascript 来预览 iFrame 内的图像，以向用户展示图像的外观。图像位于子目录中，例如：“kuvat/kuva0.jpg”。

如果用户按下“预览”按钮，我会获取生成的 html 数据 （字符串格式的 html 源数据） 并将其转换为 Blob 对象并将其用作 iframe 源进行预览.

生成的 html 和图像本身确实可以工作，例如，如果将其复制粘贴到新的 .html 文件中并通过那里显示。图像和一切都显示得很好。

问题是子目录中的图像和使用 img html-tag 中的“src”引用的图像在转换为 iFrame 源后无法正常工作。在 Blob 和 URL.createObjectURL(blob) 过程中，图像源路径和引用会发生什么变化？

生成的html源代码包含图片的方式如下

<img src="kuvat/kuva0.jpg" alt="slideshow image">

以下是 Blob 和 iframe 流程：

var html_source = document.getElementById("source_container").value;
var blob = new Blob([html_source], {type: "text/html"});
document.getElementById("iframe_container").src = URL.createObjectURL(blob);

我什至尝试只将图像标签传递给 Blob 对象并测试一个 File 对象。但他们都没有工作：

var blob = new Blob(['<img src="kuvat/kuva0.jpg" alt="slideshow image">'], {type: "text/html"});
var file = new File(['<img src="kuvat/kuva0.jpg" alt="slideshow image">'], "index.html", { type: "text/plain"});

document.getElementById("preview_container").src = URL.createObjectURL(blob);
// or
document.getElementById("preview_container").src = URL.createObjectURL(file);

【问题讨论】：

你能提供一个活生生的例子吗？您是否尝试将这些 src 值作为绝对图像路径传递？
一个活生生的例子在标签中提到的帖子中。源代码在实时版本中是这样传递的。我还尝试仅使用图像标记作为 blob 的源： new Blob([''], {type: "text/html"}) ;它没有显示图像，它只显示替代文本。所以我怀疑在转换过程中 src 路径发生了问题，它不能再引用图像了？
这不是重现您的问题的现场示例。那么，再次，您可以尝试使用绝对 img 路径吗？您的控制台中的网络选项卡中是否有任何错误？
有一个活生生的例子：codepen.io/enguerranws/pen/gOaNRNX，它适用于绝对 img 路径。所以我猜你的 img 路径是错误的。
抱歉，我误解了“直播”这个词。与绝对路径一起工作正常，但我无法让它与相对路径一起工作。如果我 a) 将生成的源代码复制粘贴到自己的 .html 文件中，则源代码确实有效，并且与我当前所在的文件夹相同，并且照片位于子目录中。 b) 我通过 Javascript 打开一个新选项卡，并使用 var tab = window.open('about:blank', '_blank'); 将源代码写入选项卡； tab.document.write(html_source); tab.document.close();在这两种情况下，相对路径有效，但是当我尝试在 iframe 源中使用 blob 方法时它不起作用。我在控制台中没有错误。

标签： javascript html

【解决方案1】：

问题是您的 iframe 文档的 baseURI 设置为 blob:https://www.lieksa.info/[UUID]。

所以当浏览器尝试解析图片的相对路径时，会使用那个baseURI来解析，导致URI无效：

const http_base = "https://www.lieksa.info/[UUID]";
console.log( 'http:', new URL( "kuva1.jpg", http_base ) ); // Success

const blob_base = "blob:https://www.lieksa.info/[UUID]";
console.log( 'blob:', new URL( "kuva1.jpg", blob_base ) ); // Error

要解决这个问题，您可以在文档的头部添加一个 <base> 元素，在声明 <img> 之前，这将为您的文档设置正确的 baseURI 和浏览器将能够正确解析您的相对路径：

const frame = document.getElementById('frame');
const html_content = `<!DOCTYPE html>
<html>
<head>
  <title>Test relative URI in blob:// frame</title>
  <!-- here we set the baseURI of our document -->
  <base href="https://upload.wikimedia.org/wikipedia/commons/4/47/">
</head>
<body>
  <!-- here we can use relative URIs, as if we were really on wikimedia's page -->
  <img src="PNG_transparency_demonstration_1.png" width="300">
</body>
</html>`;
const blob = new Blob( [html_content], { type: "text/html" } );
frame.src = URL.createObjectURL( blob );

&lt;iframe id="frame"&gt;&lt;/iframe&gt;

【讨论】：

非常感谢，这正是我想要的:)