Использование Blob в качестве источника iframe и проблема с загрузкой изображений img sr c, находящихся в подкаталоге - PullRequest
Новая
       0

Использование Blob в качестве источника iframe и проблема с загрузкой изображений img sr c, находящихся в подкаталоге

0 голосов
/ 28 мая 2020

РЕДАКТИРОВАТЬ: здесь я добавил живую версию проблемы: https://www.lieksa.info/demot/stackoverflow/blob_issue/problem.html

Я пытаюсь использовать Javascript для предварительного просмотра изображений внутри iFrame, чтобы показать пользователю, как изображение выглядит как. Изображения находятся в подкаталоге, например: «kuvat / kuva0.jpg».

Если пользователь нажимает кнопку «предварительный просмотр», я беру сгенерированные html данные (html источник данные в строковом формате) и превратите его в объект Blob и используйте его в качестве источника iframe для предварительного просмотра.

Сгенерированный html и сами изображения работают, если, например, скопировать и вставить в в новый файл. html и отображается через него. Изображения и все остальное отображаются красиво.

Проблема в том, что изображения в подкаталоге, на которые есть ссылка с помощью «sr c» внутри img html -tag, не работают после преобразования в исходный код 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);

1 Ответ

1 голос
/ 29 мая 2020

Проблема в том, что для baseURI вашего iframe-документа установлено значение 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 );
<iframe id="frame"></iframe>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...