Как отобразить изображение на iFrame?

Question

У меня есть div, который содержит iFrame:

<div class="embed-responsive embed-responsive-16by9" id="camera_view_div">
    <iframe allowfullscreen="true" class="embed-responsive-item container well well-small span6" frameborder="0" id="camera_view" mozallowfullscreen="true" msallowfullscreen="true" oallowfullscreen="true" src="" webkitallowfullscreen="true">
    </iframe>
</div>

У меня есть URL-адрес изображения с моего сервера, и я пытаюсь установить src iFrame на URL-адрес изображения. Но при обновлении начинается загрузка URL-адреса изображения.

        cameraView.src = event.info.data['image_url']; 

Как установить URL-адрес изображения в iFrame и отобразить его?

Answer 1

Как сказала scrappedcola, это странное использование iframes, но я предполагаю, что у вас есть веский аргумент для этого.

Я могу придумать два возможных решения:

1. Заголовки изображения, отправляемого сервером, не являются адекватными чтобы он отображался в iframe, браузер может просто интерпретировать его как двоичный файл для загрузки. Проверьте, можете ли вы настроить их.

https://jsfiddle.net/0ftobver/2/ << проверить заголовки заполнителя изображения </p>

2. Используйте srcdoc или вставку html в iframe, что-то вроде:

cameraView.srcdoc = '<!html doctype><style>*{padding:0;margin:0}</style><img src="https://via.placeholder.com/350x150">'

https://jsfiddle.net/q3rvd418/2/

Инжекция будет аналогичной, но доступ к свойству contentDocument в iframe.