本地图片如何便捷转为网络链接,用它就够了-UI黑客

在前端同学不在的情况下,需求方想看官网banner线上展示效果,设计师如何让官网优雅展示banner图?

也许大多数同学会把图片嵌入到官网源文件里导图展示。但是缺少了浏览器环境,banner展示效果并不是很理想,而且ps编辑也会比较麻烦。这时候利用图床替换图片地址会优雅地解决这个问题。

看完本文你将解决以下问题

  • 如何方便快捷替换某个在线网络图片

看完本文你将学到以下知识

  • 了解新名词:图床
  • 图片转为网络链接的方法
  • 寻找到图片的网页代码

什么是图床

图床是专门用来存放图片、同时允许你把图片对外连接的网上空间。说得简单点,就是让图片变成链接,变成一个网络地址,对方只要打开链接就可以看到图片。比如这个例子,例子打开后就是一张图片,这个图片已经是个网络地址。

一款mac平台图床,iPic。从名字上可以看出它是仿照了苹果的命名方式,同样也具备苹果产品简洁、易用的特性。

本地图片如何便捷转为网络链接,用它就够了-UI黑客

在图片尺寸一致的前提下,如果把做好的banner转换成网络地址,替换原有地址,就可以网页原位展示了。

网上有很多图床工具,但大多数是web应用,需要拖拽、寻找图片等操作,比较麻烦。iPic只需用户复制图片,点击上传,两步即可。因为它可以自动获取剪切板内容。

qq、微信截图后只需要点击上传就ok。

iPic图床使用方法

  1. 复制图片
  2. 上传并自动生成图片网络地址
  3. 在web代码里替换原地址
本地图片如何便捷转为网络链接,用它就够了-UI黑客

第1步:复制图片

很简单,选中做好的banner cmd+c复制即可。qq和微信截图也可以。其实就是复制到系统剪切板。

第2步:上传并生成图片网络地址

复制之后,点击顶部iPic图标,再点击待上传图片,就会自动生成网络地址,速度取决于你的图片体积和网速。一般都是一两秒,很快。

第3步:web代码替换链接

如果你懂一点前端代码,这步没难度。

我们需要找到banner的地址链接。鼠标右键点击官网banner图片就会看到浏览器底部的代码展示。正常情况下右键之后链接已经展示出来,鼠标浮动上去还能预览原banner。只需要双击蓝色链接然后cmd+v,banner已经被替换。

但有时候右键点击图片,下面代码并没有图片地址,这是因为图片被写入到css背景里面了,在浏览器右边的样式里面可以找到图片的地址,替换即可。

本地图片如何便捷转为网络链接,用它就够了-UI黑客

结语

iPic有历史记录,可以方便调用近期地址。

你可能想,这些图片都到哪儿去了呢?其实稍微分析下图片地址就会发现,图片被上传到新浪的服务器上面。https://ws4.sinaimg.cn/large/…

至于如何删除图片,目前还没有办法。

iPic是有收费功能的,提供了几种云存储,通过配置可以让图片上传到你的图片空间,大家有兴趣的可以探索下,不过免费功能已经足够设计师使用了。