Javascript 使用Blob作为iframe源和加载位于子目录中的img src映像时出现问题

编辑：我在此处添加了该问题的实时版本：

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

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

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

问题是，子目录中的图像以及在img html标记中使用“src”引用的图像在转换为iFrame源代码后无法工作。在Blob和URL.createObjectURL（Blob）过程中，图像源路径和引用会发生什么变化

生成的html源代码以以下方式包含图像

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

我甚至只尝试将图像标记传递给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);

var blob=newblob（['']，{type:“text/html”}）；
var file=新文件（['']，“index.html”，{type:“text/plain”}）；
document.getElementById（“预览容器”）.src=URL.createObjectURL（blob）；
//或
document.getElementById（“预览容器”）.src=URL.createObjectURL（文件）；

问题在于iframe的文档设置为

blob:https://www.lieksa.info/[UUID]

因此，当浏览器尝试解析图像的相对路径时，它将使用该

baseURI

解析图像，从而导致无效的URI：

consthttp\u base=”https://www.lieksa.info/[UUID]”；
log（'http:'，新URL（“kuva1.jpg”，http_base））；//成功
const blob_base=“blob:https://www.lieksa.info/[UUID]”；
log（'blob:'，新URL（“kuva1.jpg”，blob_base））；//错误

问题在于iframe的文档设置为

blob:https://www.lieksa.info/[UUID]

因此，当浏览器尝试解析图像的相对路径时，它将使用该

baseURI

解析图像，从而导致无效的URI：

consthttp\u base=”https://www.lieksa.info/[UUID]”；
log（'http:'，新URL（“kuva1.jpg”，http_base））；//成功
const blob_base=“blob:https://www.lieksa.info/[UUID]”；
log（'blob:'，新URL（“kuva1.jpg”，blob_base））；//错误

您能提供一个实例吗？您是否尝试将这些src值作为绝对图像路径传递？在“]，{type:“text/html”}中提到的帖子中有一个实例；它没有显示图像，只显示了备选文本。所以我怀疑在转换过程中src路径发生了什么，它不能再引用图像了？这不是一个重现您的问题的实例。那么，再一次，你能尝试一个绝对的img路径吗？您的控制台在“网络”选项卡中是否有任何错误？有一个实例：，它适用于绝对img路径。所以我猜你的img路径是错误的。对不起，我误解了“生活”这个词。对绝对路径很好，但我不能让它对相对路径起作用。如果我a）将生成的源文件复制粘贴到自己的.html文件中，并将其保存到与我当前所在的文件夹中，并且照片位于子目录中，则源文件可以正常工作。b） 我通过Javascript打开一个新选项卡，并使用var tab=window.open（'about:blank'，'u blank'）将源代码写入选项卡；tab.document.write（html_源代码）；tab.document.close（）；在这两种情况下，相对路径起作用，但当我尝试在iframe源代码中使用blob方法时，相对路径不起作用。控制台中没有错误。您能提供一个实例吗？您是否尝试将这些src值作为绝对图像路径传递？在“]，{type:“text/html”}中提到的帖子中有一个实例；它没有显示图像，只显示了备选文本。所以我怀疑在转换过程中src路径发生了什么，它不能再引用图像了？这不是一个重现您的问题的实例。那么，再一次，你能尝试一个绝对的img路径吗？您的控制台在“网络”选项卡中是否有任何错误？有一个实例：，它适用于绝对img路径。所以我猜你的img路径是错误的。对不起，我误解了“生活”这个词。对绝对路径很好，但我不能让它对相对路径起作用。如果我a）将生成的源文件复制粘贴到自己的.html文件中，并将其保存到与我当前所在的文件夹中，并且照片位于子目录中，则源文件可以正常工作。b） 我通过Javascript打开一个新选项卡，并使用var tab=window.open（'about:blank'，'u blank'）将源代码写入选项卡；tab.document.write（html_源代码）；tab.document.close（）；在这两种情况下，相对路径起作用，但当我尝试在iframe源代码中使用blob方法时，相对路径不起作用。控制台中没有错误。非常感谢，这正是我要找的：）非常感谢，这正是我要找的：）

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);