javascript - How to display an image on an iFrame? - Stack Overflow

admin管理员组

文章数量:1401215

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

Share Improve this question Follow asked Jul 5, 2018 at 23:34 sskssk 9,2752828 gold badges101101 silver badges176176 bronze badges 1

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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.

本文标签： javascriptHow to display an image on an iFrameStack Overflow