如何使用 Flutter 在APP中正確添加圖片

最後更新於 2021 年 8 月 16 日

沒有將圖片加入 asset 的話你對下面這個錯誤訊息一定不陌生:

The following assertion was thrown resolving an image codec: 'imgages/logo.png' Unable to load asset

明明我的語法使用正確,怎麼會出錯呢?原因是你沒有將圖片路徑添加到assets。

添加圖片

開啟pubspec.yaml 中添加圖片路徑:

flutter:
  assets:
   - assets/

要注意的一點是,assets需添加於flutter底下,注意層級結構避免出錯。

語法

圖片的路徑記得與assets填寫相同:

/* 本地圖片 */
Image(image: AssetImage('image path'));
// 或
Image.asset('image path'),

/* 網路圖片 */
Image(image: NetworkImage('Image URI'));
// 或
Image.network('Image URI')

建議參考 https://flutter.dev/docs/development/ui/assets-and-images

4e52d54f6bc42abb41d26eb5b0df6517?s=250&d=wavatar&r=g 如何使用 Flutter 在APP中正確添加圖片
0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論