代码之家 › 专栏 › 技术社区 › ssk

如何在iframe上显示图像?

iframe image html javascript

ssk · 技术社区 · 6 年前

我有一个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,我正试图将iframe的src设置为图像url。但它会在更新时开始下载图像url。

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

如何在iframe上设置图像url并显示它?

1 回复 | 直到 6 年前

mxcoder 6 年前

正如CrappedCola所说,这是iframes的一个奇怪用法,但我假设您对此有一个有力的论据。

我可以想出两种可能的解决方案:

服务器发送的图像的标题不正确为了在iframe中显示它,浏览器可能只是将其解释为要下载的二进制文件。检查你是否能调整它们。

https://jsfiddle.net/0ftobver/2/ <<检查占位符图像的标题

使用 srcdoc 或者在iframe中注入html,比如:

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

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

注射是相似的,但是 contentDocument iframe的属性。

推荐文章

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

McRui · Laravel storeAs()存储问题中的图像

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

GabyUnalaq · 从原始RGB深度图像到灰度的转换不正确

2 年前

AayushPokharel · 如何在css中处理图像的alpha层?

2 年前

MHSarmadi · 阻止显示未完全加载的图像

2 年前

softandwet · 反应img onError未点火

2 年前

Nilesh soni · 颤振图像已缩放,但如何更改缩放位置

2 年前

Adheed nihal · 如果在jquery中超过了文件限制,如何清除用户上传的图像

2 年前

imcoding · img src属性上的vuejs数据绑定出现404错误

2 年前