How to display an image on an iFrame?

Question

I have a div which contains an 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>

I have an image url from my server and I am trying to set the iFrame's src to the image url. But it starts a download of the image url on update.

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

How to set an image url on an iFrame and display it?

Answer 1

as scrappedcola said, this is an odd usage of iframes, but I'll assume you have a powerful argument for it.

I can think of two possible solutions:

1. The headers of the image being sent by the server are not adecuate for it to be displayed in the iframe, the browser might just interpret it as a binary file to download. Check if you can adjust them.

https://jsfiddle.net/0ftobver/2/ << check the headers of the placeholder image

2. Use srcdoc or injection of html in the iframe, something like:

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

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

Injection would be similar but accesing the contentDocument property of the iframe.