html在线预览图片html在线预览图片

生命不息,
折腾不止!

html在线预览图片

如果直接访问,只会出现页面提示,是打不开图片的,需要在链接后面加上这些代码:

/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>

 

赞() 打赏
未经允许不得转载:我的博客 » html在线预览图片
分享到: 更多 (0)

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    这是评论测试

    DUX主题小秘7个月前 (09-17)回复
    • 飞歌导航东方红烦得很

      themebetter主题小秘3周前 (04-08)回复
  2. #2

    这是新的一条评论

    DUX主题小秘7个月前 (09-17)回复
  3. #3

    未来一年,中国的移动支付市场会是什么样?

    DUX主题小秘7个月前 (09-17)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

大前端WP主题 更专业 更方便

联系我们 联系我们