在前端同學(xué)不在的情況下，需求方想看官網(wǎng)banner線上展示效果，設(shè)計師如何讓官網(wǎng)優(yōu)雅展示banner圖？

也許大多數(shù)同學(xué)會把圖片嵌入到官網(wǎng)源文件里導(dǎo)圖展示。但是缺少了瀏覽器環(huán)境，banner展示效果并不是很理想，而且ps編輯也會比較麻煩。這時候利用圖床替換圖片地址會優(yōu)雅地解決這個問題。

看完本文你將了解這些

如何方便快捷替換某個在線網(wǎng)絡(luò)圖片

了解新名詞：圖床

圖片轉(zhuǎn)為網(wǎng)絡(luò)鏈接的方法

尋找到圖片的網(wǎng)頁代碼

什么是圖床

圖床是專門用來存放圖片、同時允許你把圖片對外連接的網(wǎng)上空間。說得簡單點，就是讓圖片變成鏈接，變成一個網(wǎng)絡(luò)地址，對方只要打開鏈接就可以看到圖片。比如這個例子，例子打開后就是一張圖片，這個圖片已經(jīng)是個網(wǎng)絡(luò)地址。

一款mac平臺圖床，iPic。從名字上可以看出它是仿照了蘋果的命名方式，同樣也具備蘋果產(chǎn)品簡潔、易用的特性。

在圖片尺寸一致的前提下，如果把做好的banner轉(zhuǎn)換成網(wǎng)絡(luò)地址，替換原有地址，就可以網(wǎng)頁原位展示了。

網(wǎng)上有很多圖床工具，但大多數(shù)是web應(yīng)用，需要拖拽、尋找圖片等操作，比較麻煩。iPic只需用戶復(fù)制圖片，點擊上傳，兩步即可。因為它可以自動獲取剪切板內(nèi)容。

qq、微信截圖后只需要點擊上傳就ok。

iPic圖床使用方法

復(fù)制圖片

上傳并自動生成圖片網(wǎng)絡(luò)地址

在web代碼里替換原地址

第1步：復(fù)制圖片

很簡單，選中做好的bannercmd+c復(fù)制即可。qq和微信截圖也可以。其實就是復(fù)制到系統(tǒng)剪切板。

第2步：上傳并生成圖片網(wǎng)絡(luò)地址

復(fù)制之后，點擊頂部iPic圖標(biāo)，再點擊待上傳圖片，就會自動生成網(wǎng)絡(luò)地址，速度取決于你的圖片體積和網(wǎng)速。一般都是一兩秒，很快。

第3步：web代碼替換鏈接

如果你懂一點前端代碼，這步?jīng)]難度。

我們需要找到banner的地址鏈接。鼠標(biāo)右鍵點擊官網(wǎng)banner圖片就會看到瀏覽器底部的代碼展示。正常情況下右鍵之后鏈接已經(jīng)展示出來，鼠標(biāo)浮動上去還能預(yù)覽原banner。只需要雙擊藍(lán)色鏈接然后cmd+v，banner已經(jīng)被替換。

但有時候右鍵點擊圖片，下面代碼并沒有圖片地址，這是因為圖片被寫入到css背景里面了，在瀏覽器右邊的樣式里面可以找到圖片的地址，替換即可。

結(jié)語

iPic有歷史記錄，可以方便調(diào)用近期地址。

你可能想，這些圖片都到哪兒去了呢？其實稍微分析下圖片地址就會發(fā)現(xiàn)，圖片被上傳到新浪的服務(wù)器上面。https://ws4.sinaimg.cn/large/…

至于如何刪除圖片，目前還沒有辦法。

iPic是有收費功能的，提供了幾種云存儲，通過配置可以讓圖片上傳到你的圖片空間，大家有興趣的可以探索下，不過免費功能已經(jīng)足夠設(shè)計師使用了。

更多UI設(shè)計干貨文章請關(guān)注UI黑客

微信公眾號 uihacker

UI黑客官網(wǎng)?http://www.uihacker.com/

UI黑客論壇?http://bbs.uihacker.com/