
從外部雲端空間載入圖片至 App Inventor
使用 App Inventor 撰寫的 App 都有檔案的限制,目前的檔案上限為 30 MB,如果要在專案中使用大量的圖片的話,很容易就會超過限制,所以我們可以將圖片先放在雲端空間,再以取得影像連結的方式,將圖片載入至 App 中,這樣可以大大的降低 App 的檔案大小。
以下以 Imgur 平台做示範:
一、進入 Imgur 的首頁,點選左上角的「New post」上傳圖片,或右上角的「Sign up」來註冊帳號。

二、將圖片拖拉至「Drop images here」

三、在已上傳的圖片點選滑鼠右鍵,選擇「複製影像連結」,先將複製的連結存到記事本,稍後會使用到。

四、新增一個 App Inventor 專案,將圖片元件和按鈕元件拖拉至工作面板。
此 App 的功能為,當按下按鈕就顯示圖片。

五、開始撰寫程式碼,將「當按鈕被點選」方塊拖拉至工作面板,方塊裡放「設置圖像的方塊為…」,右方放置字串方塊,內容為剛剛複製的影像網址。

這樣即可在 App 中顯示圖片

如果說要使用很多的圖片,可以設置一個清單變數,將圖片連結先存於變數中,要使用時再以「選擇清單中所引值為…的資料」方塊,來做選擇。

此方法除了 Imgur 平台可以用之外,也適用於其他的空間平台,像是 Google 圖片,搜尋找到想要的圖片後,也能用相同的方法試試看。
App 完整程式碼:

App 範例執行畫面:
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊

