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?

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?

• javascript
• html
• image
• iframe

• 2 What is your goal of using an iframe? Generally one would use an image tag for images. iFrames are independent documents so you would need to use an image tag in any case within the iframe for your content. – scrappedcola Commented Jul 5, 2018 at 23:38

1 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/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./350x150">'

https://jsfiddle/q3rvd418/2/

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