如果直接访问,只会出现页面提示,是打不开图片的,需要在链接后面加上这些代码:
/index.html?test.jpg
index.html 就是上传的代码页面,test.jpg是测试的图片名,当然你也可以取其他名字,建议用英文和数字,不要用中文。
所以结构就是
你的网站地址 + /index.html? + 图片.后缀名
访问的测试页面
http://127.0.0.1/index.html?test.jpg
这样,我们的页面就可以通过连接预览了。
注意点
1-PC设计稿需要用两倍图,即1920的尺寸是3840px、1440尺寸是2880px。
2-如果打不开,请确认下设计稿后缀名和链接后缀名是否一致。设计稿是png,但链接最后是jpg,就无法打开。
index.html 文件内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="renderer" content="webkit">
<title>测试页面</title>
<!--[if lte IE 8]>
<style type="text/css">
html,body{width:100%; height:100%; overflow:scroll}
.section-btn{display:none;}
</style>
<![endif]-->
<style type="text/css">
center {
display: none !important;
}
html,body{
height: 100%;
overflow: auto;
}
body{
padding: 0;
margin: 0;
}
.container{
position: relative;
overflow-x: hidden;
height: 100%;
}
.container > div{
position: absolute;
top: 0;
left: 50%;
}
.pix{
height: 1px;
overflow: hidden;
margin-top: -1px;
}
.container img.half{
position: absolute;
top: 0;
left: -25%;
width: 50%;
}
</style>
</head>
<body>
<script>
var imgUrl = location.search.replace(/^\?/g, '');
var html = [];
html.push('<div class="container">')
html.push('<div>')
html.push(' <div class="pix"><img src="' + imgUrl + '" /></div>')
html.push(' <img class="half" src="' + imgUrl + '" />')
html.push('</div>')
html.push('</div>');
document.write(html.join(''));
</script>
</body>
</html>
这是评论测试
飞歌导航东方红烦得很
这是新的一条评论
未来一年,中国的移动支付市场会是什么样?