跳到主要內容

Flutter Web renderer: doesn't show Image on the chrome browser but works on android.

Flutter可以跑在chrome瀏覽器上,但一執行卻出現無法顯示圖片的錯誤訊息.

這到底是怎麼了? 太奇怪了吧,花了半天檢查程式碼是否有寫錯.

Image.network(
"https://flutter.cn/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png"),

語法是對的,但跑在瀏覽器上就是會出現大叉叉.

When the exception was thrown, this was the stack:
Image provider: CachedNetworkImageProvider("https://via.placeholder.com/150/a46a91", scale: 1)
Image key: CachedNetworkImageProvider("https://via.placeholder.com/150/a46a91", scale: 1)
=====

Exception caught by image resource service ==

The following ImageCodecException was thrown resolving an image codec:
Failed to load network image.
Image URL: https://via.placeholder.com/150/323599
Trying to load an image from another domain?

----

然後我才發現,同樣的flutter code,但在android 平台上可以跑(右圖).

但放在電腦chrome 卻不能正常執行,顯示的圖片上出現驚嘆號(左圖).

原來不是程式寫錯.

原因似乎在這:

flutter web has upgraded default rendered(HTML) -> CanvasKit and it has better performance.

https://flutter.dev/docs/development/platform-integration/web-images


 ----

Flutter renderers on the web

Flutter offers a choice of two renderers on the web: (官方說明)

  • HTML: this renderer uses a combination of HTML, CSS, Canvas 2D, and SVG to render UI. It uses the <img> element to render images.
  • CanvasKit: this renderer uses WebGL to render UI, and therefore requires access to the pixels of the image.

--web-renderer 可選參數值為 autohtmlcanvaskit

auto(默認)- 自動選擇渲染器。行動端上會自動選擇 HTML,桌面端瀏覽器會自動選擇 CanvasKit。 所以問題就出在這.

This flag can be used with the run or build subcommands.

For example:

flutter run -d chrome --web-renderer html
flutter build web --web-renderer canvaskit

 所以要讓瀏覽器上的圖片能顯示,需要在terminal (android studio) 上執行下列指令.

 flutter run -d chrome --web-renderer=html

需切換到html渲染才可以在 chrome上執行,因此不是你的程式碼有問題.

不過這樣子需要每次都要執行指令一次實在很麻煩,

有沒有設定一次以後就不用再設定的永久方法呢? 

有的!

-----

Choose your Flutter web renderer

If you use Android Studio: Go to Run/ Run.../ Edit Configurations.../, then in Additional arguments add this  
 
--web-renderer html
 

這樣就一勞永逸,不用每次都要設定一次.


留言

這個網誌中的熱門文章

最爛的銀行服務-玉山銀行

今天寫信給玉山銀行,問他說能不能給予我免費跨行轉帳次數, 我是他們大客戶....常常需要轉帳跟提款.發現這樣被扣手續費很不划算. 玉山銀行的atm又很少見. 但是得到的回應是這樣: 看完這信,有回答等於沒回答,當下我就決定要轉到其他家銀行了, 只是有點麻煩,股票帳戶,外幣帳戶,黃金存摺帳戶... 玉山銀行在我家附近連一台提款機都沒有,每次都要借台新銀行或中信銀行的atm. 把錢放在這裡實在不方便,不斷被扣轉帳手續費跟提款手續費. 你看台新銀行richard給我五次免費額度. 使用其他家例如合作金庫與兆豐銀行都有台灣pay可以免手續費. 玉山銀行???? 今天開始要開始廢棄玉山銀行了.... 而且看這回信後,我也覺得玉山銀行很爛,自己不建atm,又不給客戶免費跨行提款次數,叫我跑大老遠自己搜尋ATM. 建議大家他的股票: 玉山 金控 ( 2884 ) 也不要買, 股價一定會慢慢下跌的,看他們家的服務讓客戶一個一個跑掉,就知道了 . 未來不是有很多純網銀出來嗎? 他們都會給予更多免費跨行轉帳次數. 感覺未來這種服務不佳的銀行都準備被淘汰吧. 對於app設計師來說: 這種回答也是最不佳的. 我們要對user友善點,使用者反應app會當機,有問題時, 回答要能解決他們的問題. 千萬不能像玉山銀行客服人員這樣回答. 使用者都是很厲害的,他發現你沒鳥他,明天開始就刪除app了. PS:後來去辦了兆豐銀行.行員說只要辦個數位帳戶就有10次跨行提款...而且已經有一般非數位帳戶也可再申請一個數位的. 相比玉山銀行還限制如果有玉山帳戶者再申請數位帳號也沒有跨行轉帳提款優惠,玉山真的好差... 除此之外,台新銀行也給我各5次免費跨行轉帳+提款次數 真的好好..(以上都不用薪轉戶,一般人都有資格可以申請) 有了15次轉帳跟跨行提款免費,就不用到處找ATM.... 心情好多了,現在欠缺的就是錢了

app bundle and bundletool. 關於aab安裝問題

google 有說明年開始強制使用app bundle. 不然不准更新app. 但是產出的apk不再是apk了,而是aab. C:\release>adb install 6.aab Performing Streamed Install adb.exe: filename doesn't end .apk or .apex: 6.aab   不能透過adb install.... so, google 發表一個新tool: 去download bundletool...因為是java跨平台都可執行. https://github.com/google/bundletool/releases   You can extract the apks files from the aab file using the bundletool command. https://developer.android.com/studio/command-line/bundletool To generate an APK set for all device configurations (signed with a debug key) you can use:  bundletool build-apks --bundle=/MyApp/my_app.aab --output=/MyApp/my_app.apks To deploy your app from an APK set, use the install-apks  bundletool install-apks --apks=/MyApp/my_app.apks test:   C:\release>java -jar bundletool.jar build-apks --bundle=6.aab --output=out_6.apks INFO: The APKs will be signed with the debug keystore found at 'C:\Users\mark\.android\debug.keystore'.   還是失敗,還要指定key才可以...  For Release apk command, example 1: bundle

ios app 上架時app icon要注意事項

按照apple ios app icon標準(App Icon Attributes): All app icons should adhere to the following specifications. 所有app icon須符合下列: -Format: PNG  , 一定要png...但全彩png size很大 .. -Color: 注意24bit不要有透明色在上面. -Layers: Flattened with no transparency. 絕不可以有alpha透明色. -Shape Square with no rounded corners 不可以有圓角,之後apple會統一用圓角特效上去. -Resolution: -iPhone X, iPhone 8 Plus, iPhone 7 Plus, and iPhone 6s Plus @3x -All other high-resolution iOS devices @2x ps: 建議不要使用 PDF 檔案.. pdf內是一個向量圖,本來是用來減少png的size太大問題. 但對於較複雜的圖像而言 PNG 的表現實際上是優於 PDF 的. iOS系統會自動把 30x30 的 PDF 圖檔做成 @2x 60x60 的 PNG 圖檔. 很複雜的官方說明: Image Size (px) File Name Used For App Store 512x512 iTunesArtwork App list in iTunes Do not include 1024x1024 iTunesArtwork@2x App list in iTunes on devices with retina display Do not include 120x120 (最重要!) Icon-60@2x.png Home screen on iPhone/iPod Touch with retina displ

SMR疊瓦式hdd致命缺陷被解決????!!!

新聞來源: https://tech.sina.cn/2019-12-25/detail-iihnzahi9980174.d.html 現在90%所有的硬碟 … 除了SSD 之外都是採用PMR 技術,但為容量增長而發展的SMR( 疊瓦式磁紀錄)會比較便宜不要踩地雷 。 PMR、SMR 硬碟分別是什麼? PMR (perpendicular magnetic recording,垂直磁性記錄). 寫入磁頭會比讀取磁頭來得大,因此硬碟供應商若要增加磁錄密度,就會儘可能讓寫入磁頭的尺寸縮小至物理極限為止。 SMR (shingled magnetic recording,疊瓦式磁性記錄). SMR 採用的技術是讓資料循序寫入,如其名稱所示,磁軌會如瓦片般堆疊在另一磁軌的部分面積上,藉此達到增加磁錄密度的目的。在此情況下,讀取磁頭仍可從磁軌上未被覆蓋的部分來讀取資料。   玩家對SMRHDD避之唯恐不及,因為這種HDD性能、可靠性都有問題,但它能提升HDD存儲密度大約1/4 PMR 與 SMR 的差異 當 SMR 硬碟上循序寫入新資料時,這些如瓦片般堆疊的磁軌仍可正常讀取, 並不影響讀取效能。 不過,一旦已寫入的資料要修改或覆寫時,寫入磁頭並不會直接在既有的磁軌上進行磁錄,以避免毀損相鄰的磁軌。 編輯後的資料會先在磁碟上的空白處寫入,原先舊資料的磁軌會暫時維持不動。 等到硬碟閒置時才會進行重新整理的機制,將原先磁軌上的舊資料自動清除,並重新成為可用空間以供新資料寫入。 就前述的重新整理機制而言, SMR 硬碟的閒置時間就顯得相當重要。如果 SMR 硬碟長時間進行密集的覆寫任務,則會沒有足夠的閒置時間來重新整理磁軌,暫時不動的既有資料磁軌數量會越來越多。接著導致 SMR 硬碟必須一邊寫入新資料,一邊重新整理舊磁軌,進而對讀寫效能造成某種程度的影響。 WD他們開發了名為Zonefs的文件系統,有望解決SMR HDD寫入數據時的弊端,同時也適用於SSD。 WD近年來一直在研究分區存儲(Zoned Storage),它將 HDD的LBA空間分成多個區塊,只能從每個區塊的開頭順序寫入數據,而且數據不能任意覆蓋。這種數據存儲技術可以改變SMR、SSD HDD存儲、寫入數據的方式,不會再像現在這樣有很多隨機

更改google drive預設存放目錄位置Change Google Drive Default Folder Location in Windows

Google drive預設存放位置是放在C:\Users\username\Google 雲端硬碟.有些人c槽是ssd,空間有限.如果一不小心,像google drive空間有1TB的人. SSD就被塞爆...需要改放在其他磁碟機..(例如c是ssd, D是一般硬碟..可能有幾TB) 1.如果之前已經安裝的人,首先先解除帳戶連結.解除後再刪除掉目前的舊的Google Drive 目錄.釋放已占空間.(不用擔心,因為已經備份到雲端,待會會自動再下載回來.) 2.再次登入帳戶,在最後一頁時.不要那麼快按確認,這裡有個"進階設定". 3.這邊可更改預設資料夾...我們把他改到D槽...或其他槽. 建一個新目錄,取個好記的名字,例如"[GoogleDrive]",加上特殊字元"[" "]"可讓資料夾排在最前面,將來比較好找.更改好之後,再選擇這新資料夾.   PS: 也建議大家不要把Google drive預設資料夾放在C:\Users\username\Google 雲端硬碟. 一則不方便找.二則重灌電腦時,會忘記這邊有資料,整理起來很麻煩.三是C通常是SSD,容量小,設在D槽(如果是HDD的話),可避免塞爆SSD.