在前端同学不在的情况下，需求方想看官网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/

---