App Inventor學習記錄176-google driver、onedriver、dropbox等6種外鏈圖片的設定方法

app inventor有檔案大小的限制在,所以大一點的圖片,我們可以用外鏈的方式來做,這次記錄一下。怎麼在 app ivnentor中使用放在 google driver、one driver、dropbox、google photo、imgur以及 blogger上的圖片


這次範例的完成品如下。

這次所有的圖片都放在 google driver、one driver、dropbox、google photo、imgur以及 blogger這六個地方,完全沒有上傳到 app inventor中。所以圖片在載入的時候會比較慢一些。


畫面編排的部份如下。

一個圖片配一個標籤,最下方則是一個圖片更新的按鈕。


式碼的部份沒有什麼很特別的地方,先來介紹一下怎麼取得這些圖片的外鏈。
先介紹 google driver的部份。

圖片上傳到 google driver之後,在圖片的上方點擊滑鼠右鍵,點擊取得連結


在跳出來的視窗中,我們可以看到圖片的連結,但這不能拿來當外鏈圖片用。

在這裡,我們把圖片的 id給複製一下。圖片 id就是上圖中反藍的部份。


接下來把圖片 id組合成下圖最下方的網址。

組合成這個樣子,https://lh3.googleusercontent.com/u/0/d/圖片id,這樣就是我們需求的格式了。


接著說明 onedrive的部份。

圖片上傳到 one drive之後,點擊一下圖片。


這時候會跳出來一個新的視窗。

我們點擊一下檢示原始影像按鈕。


這時候,又會再跳出一個沒有工具列的視窗。

在圖片上,點擊滑鼠右鍵,點擊複製圖片位置


然後把這個網址複製到記事本上,刪除網址最後面的 ?psid=x


接著是 dropbox的外鏈圖片的取法

滑鼠移動到右方,僅限您的字樣會變成複製連結。我們點一下之後,就會自動的把連結複製下來。


同樣的,我們開啟記事本。修改一下連結的格式。

把網址修改成這樣,https://dl.dropboxusercontent.com/s/9fuvak6s1v21sbr/31.png


imgur的外鏈取得方式。首先我們先上傳圖片。


在跳出來的視窗中的圖片上按滑鼠右鍵,點擊複製圖片位址


google photo的外鏈取得方法

點擊圖片之後,按下分享按鈕。


點擊建立連結。


再點擊建立連結。


複製這一個連結。


打開這一個 embed google photo這個網站,把我們剛才複製下來的連結貼到對話框中,點擊 generate。


複製這一個連結。


它會長的像這樣……很長一串。


最後來介紹 blogger的外鏈圖片取得

發布一個新文章,然後把圖片都上傳上去之後,點擊文頁頁面的檢示按鈕。


點擊一下圖片。


在圖片上方按滑鼠右鍵,點擊複製圖片位址。

這裡要注意一下,要複製的圖片位置這裡,下方是有幻燈片的。

不想要重新拉程式方塊,或要需要範例 aia檔的話,請前往第 2頁哦!

發表迴響