在前端同学不在的情况下，需求方想看官网banner线上展示效果，设计师如何让官网优雅展示banner图？
也许大多数同学会把图片嵌入到官网源文件里导图展示。但是缺少了浏览器环境，banner展示效果并不是很理想，而且ps编辑也会比较麻烦。这时候利用图床替换图片地址会优雅地解决这个问题。
看完本文你将了解这些
如何方便快捷替换某个在线网络图片
了解新名词：图床
图片转为网络链接的方法
寻找到图片的网页代码
什么是图床
图床是专门用来存放图片、同时允许你把图片对外连接的网上空间。说得简单点，就是让图片变成链接，变成一个网络地址，对方只要打开链接就可以看到图片。比如这个例子，例子打开后就是一张图片，这个图片已经是个网络地址。
一款mac平台图床，iPic。从名字上可以看出它是仿照了苹果的命名方式，同样也具备苹果产品简洁、易用的特性。
在图片尺寸一致的前提下，如果把做好的banner转换成网络地址，替换原有地址，就可以网页原位展示了。
网上有很多图床工具，但大多数是web应用，需要拖拽、寻找图片等操作，比较麻烦。iPic只需用户复制图片，点击上传，两步即可。因为它可以自动获取剪切板内容。
qq、微信截图后只需要点击上传就ok。
iPic图床使用方法
复制图片
上传并自动生成图片网络地址
在web代码里替换原地址
第1步：复制图片
很简单，选中做好的bannercmd+c复制即可。qq和微信截图也可以。其实就是复制到系统剪切板。
第2步：上传并生成图片网络地址
复制之后，点击顶部iPic图标，再点击待上传图片，就会自动生成网络地址，速度取决于你的图片体积和网速。一般都是一两秒，很快。
第3步：web代码替换链接
如果你懂一点前端代码，这步没难度。
我们需要找到banner的地址链接。鼠标右键点击官网banner图片就会看到浏览器底部的代码展示。正常情况下右键之后链接已经展示出来，鼠标浮动上去还能预览原banner。只需要双击蓝色链接然后cmd+v，banner已经被替换。
但有时候右键点击图片，下面代码并没有图片地址，这是因为图片被写入到css背景里面了，在浏览器右边的样式里面可以找到图片的地址，替换即可。
结语
iPic有历史记录，可以方便调用近期地址。
你可能想，这些图片都到哪儿去了呢？其实稍微分析下图片地址就会发现，图片被上传到新浪的服务器上面。https://ws4.sinaimg.cn/large/…
至于如何删除图片，目前还没有办法。
iPic是有收费功能的，提供了几种云存储，通过配置可以让图片上传到你的图片空间，大家有兴趣的可以探索下，不过免费功能已经足够设计师使用了。
更多UI设计干货文章请关注UI黑客
微信公众号 uihacker
UI黑客官网 http://www.uihacker.com/
UI黑客论坛 http://bbs.uihacker.com/
