如果大小IS NOT NULL，则加载img [英] Load img if size IS NOT NULL
问题描述
如果有一个Raspberry Pi监控摄像头，每3秒需要一个快照。
这100％工作，我借助以下HTML代码显示图像：
< ！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // EN http://www.w3.org/TR/html4/loose.dtd >
< HTML >
< < span class =code-leadattribute> HEAD >
< META HTTP-EQUIV = 刷新 CONTENT = 5; >
< style type = text / css >
img
{
width ： 316px;
height ： 207px;
position ： 已修复;
top ： 0px;
left ： 0px;
}
< / style >
< / HEAD > ;
< BODY >
< img src = http：// 192.168.1.121/snapshot.jpg\" alt = Frontdoor >
< / BODY > ;
< / HTML >
但问题是HTML页面有时会在文件写入服务器时读取图像。那时文件大小是0字节，HTML页面显示一个白色矩形，什么都没有。
我不是HTML或Javascript中的明星所以我的问题我如何为这种情况制作一个If-Then-Else？
喜欢：
如果 filesize（ http://192.168.1.121/snapshot.jpg） > 0
然后
显示图片
Else
不刷新图片
Endif
对我而言，这与哪种语言没有任何区别问题解决了......
提前致谢！
Alex
< blockquote>你可以看看使用Javascript刷新图像
第一种方法不会解决加载破损图像的问题，但它会快速更新（我有它设置为500毫秒 - 0.5秒），我在家里使用安全摄像头，虽然它偶尔显示一个破损的图像，它只是在很短的时间内：
function refreshImage（）
{
var src = http://192.168.1.121/snapshot.jpg？ + new Date （）。getTime（）;
var myImage = new Image（）;
myImage.src = src;
myImage.onload = function （）{
document .getElementsByTagName（' img'）[ 0 ]。src = SRC;
};
}
setInterval（refreshImage， 500 ）;
或者，您可以使用XHR加载映像 - 但您可能必须设置本地域才能使其工作而不是基于IP地址。 - 这将修复损坏的图像问题 - 我已经在内容长度检查中添加了但你可以删除它并且它仍然可以正常工作
function refreshImage（）
{
var src = http://192.168.1.121/snapshot.jpg？ + new Date （）。getTime（）;
var xhr = new XMLHttpRequest（）;
xhr.open（' HEAD'，src，真）;
xhr.onreadystatechange = function （）{
if （xhr.readyState = = 4 && xhr.status == 200 ）{
if （xhr.getResponseHeader（' Content-Length'） > 0 ）
{
document .getElementsByTagName（' img'）[ 0 ]。src = src;
}
}
};
xhr.send（ null ）;
}
setTimeout（refreshImage， 5000 ）;
Hi,
If have a Raspberry Pi surveillance cam and it takes every 3 seconds a snapshot.
This works 100%, and I display the image with help of the following HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="refresh" CONTENT="5;">
<style type="text/css">
img
{
width:316px;
height:207px;
position:fixed;
top:0px;
left:0px;
}
</style>
</HEAD>
<BODY>
<img src="http://192.168.1.121/snapshot.jpg" alt="Frontdoor">
</BODY>
</HTML>
But the problem is that the HTML page sometimes read the image while the file is written on the server. At that moment the file-size is 0 bytes, the HTML page shows a white rectangular containing nothing.
I'm not a star in HTML or Javascript so my question is how do I make an If-Then-Else for this case?
Like:
If filesize("http://192.168.1.121/snapshot.jpg") > 0
Then
Show Image
Else
Do not refresh the image
Endif
For me it does not make any difference in which language this problem is solved...
Thanks in advance!
Alex
You could look at refreshing the image using Javascript
This first method wont combat the issue with loading a broken image, however it will update quickly (i've got it set at 500ms - 0.5s), I use a security cam at home and although it does occasionally show a broken image it is only for a very small time:
function refreshImage() { var src = "http://192.168.1.121/snapshot.jpg?" + new Date().getTime(); var myImage = new Image(); myImage.src = src; myImage.onload = function(){ document.getElementsByTagName('img')[0].src = src; }; } setInterval( refreshImage, 500 );
Alternatively, you could load the image in with XHR - but you'll probably have to set up a local domain for it to work instead of IP address based. - This will fix the broken image issue - I've added in the Content-Length check but you could probably remove this and it still work fine
function refreshImage() { var src = "http://192.168.1.121/snapshot.jpg?" + new Date().getTime(); var xhr = new XMLHttpRequest(); xhr.open('HEAD', src, true); xhr.onreadystatechange = function(){ if ( xhr.readyState == 4 && xhr.status == 200 ) { if( xhr.getResponseHeader('Content-Length') > 0 ) { document.getElementsByTagName('img')[0].src = src; } } }; xhr.send(null); } setTimeout( refreshImage, 5000 );
这篇关于如果大小IS NOT NULL，则加载img的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
