怎樣在GitHub建立目錄上傳圖片?

來源:酷知科普網 1.7W

GitHub是全世界最大的極客網站,在這裡可以建立自己的專案程式碼,並能夠和世界上優秀的程式設計師交流心得。這篇指南是教大家怎樣在GitHub專案倉庫中建立目錄上傳圖片,希望對你有所幫助!

工具/材料

GitHub專案管理員

操作方法

01

在GitHub的專案倉庫中,點選【upload files】就可以將檔案上傳到伺服器,可以使用查到上傳的方法,也可以直接將待上傳的圖片拖拽到這個地方。另外建議在檔案上傳之前,將它命名成簡單的名稱,便於在程式碼編輯中使用。

怎樣在GitHub建立目錄上傳圖片?
怎樣在GitHub建立目錄上傳圖片? 第2張
02

必須上傳進度條完成才可以點選【commit changes】,否則會出現未知錯誤,上傳的時間和網速以及檔案大小有關。

怎樣在GitHub建立目錄上傳圖片? 第3張
怎樣在GitHub建立目錄上傳圖片? 第4張
03

上傳成功後,在倉庫的主目錄中可以看到0.jpg的圖片,這個就是剛剛成功上傳的檔案。這裡我們將另外一個檔案進行編輯,將圖片0.jpg新增到我們的網頁中,同樣點選檔案後面的編輯符號即可。

怎樣在GitHub建立目錄上傳圖片? 第5張
怎樣在GitHub建立目錄上傳圖片? 第6張
04

在body中插入圖片,這裡需要使用到圖片標籤<image src="0.jpg"/>
這樣就會將統計目錄下的0.jpg插入到網頁中,網頁效果如圖。

怎樣在GitHub建立目錄上傳圖片? 第7張
怎樣在GitHub建立目錄上傳圖片? 第8張
05

對於複雜的網頁(多圖)怎辦?
這裡就需要將檔案分類,在倉庫中建立資料夾,使用“/”,這樣就可以建立一個目錄,但是該目錄下必須新建檔案才會成為目錄資料夾,否者就是文字檔案,這裡建立的是001資料夾,下面有一個test檔案。

怎樣在GitHub建立目錄上傳圖片? 第9張
怎樣在GitHub建立目錄上傳圖片? 第10張
06

移動檔案
對於HTML檔案,可以進行移動位置,我們點選HTML後面的編輯符號,修改檔案的儲存地址,需要使用到“/”,比如移動到001資料夾下,輸入001/即可。

怎樣在GitHub建立目錄上傳圖片? 第11張
怎樣在GitHub建立目錄上傳圖片? 第12張
怎樣在GitHub建立目錄上傳圖片? 第13張
07

移動圖片
剛剛上傳的圖片,我們用上述方法是不行的,只能將這個圖片刪除,然後重新上傳到指定目錄下面。

怎樣在GitHub建立目錄上傳圖片? 第14張
08

這裡圖片上傳的方法和步驟一模一樣,由於檔案地址發生變化,我們的程式碼也要修改,這裡插入的圖片就是不是同級目錄下的0.jpg了,而是同級目錄下image資料夾中的0.jpg。

怎樣在GitHub建立目錄上傳圖片? 第15張
怎樣在GitHub建立目錄上傳圖片? 第16張
09

插入的程式碼格式是這樣的<image src="./images/0.jpg">,訪問自己的網頁時候就可以將倉庫的目錄地址貼上到網址後面進行訪問了。

怎樣在GitHub建立目錄上傳圖片? 第17張
怎樣在GitHub建立目錄上傳圖片? 第18張
怎樣在GitHub建立目錄上傳圖片? 第19張

特別提示

建立資料夾時候需要有一個檔案在該目錄下。

熱門標籤