我在将图像添加到颤振项目时遇到问题
Posted
技术标签:
【中文标题】我在将图像添加到颤振项目时遇到问题【英文标题】:I have a problem adding an image to a flutter project 【发布时间】:2019-10-23 08:35:37 【问题描述】:我正在尝试一个 Flutter Web 项目(可能没有什么不同,但值得一提),我想添加一张图片,但每次尝试时都会出错,
我已将正确的资产添加到 pubspec.yaml 文件中,并且文件位于文件夹中。
我已经尝试重新启动我的 ide,并且干净利落。 完全没有变化。
class _homePageState extends State<homePage>
@override
Widget build(BuildContext context)
var textStyle = TextStyle(
color: Colors.black,
fontSize: 30,
fontWeight: FontWeight.w100,
);
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
fontFamily: "MontSerrat"
),
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.grey[400],
title: Text("Example",
style: TextStyle(
color: Colors.black,
fontSize: 40,
fontWeight: FontWeight.w100,
),
)
),
body:
Container(
color: Colors.grey[400],
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/images/first_image.jpg')
],
),
)
),
);
pubspec.yaml 看起来像:
name: epq_webapp
description: An app built using Flutter for web
environment:
# You must be using Flutter >=1.5.0 or Dart >=2.3.0
sdk: '>=2.3.0-dev.0.1 <3.0.0'
dependencies:
flutter_web: any
flutter_web_ui: any
dev_dependencies:
build_runner: ^1.4.0
build_web_compilers: ^2.0.0
pedantic: ^1.0.0
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
flutter:
fonts:
- family: MontSerrat
fonts:
- asset: assets\fonts\montserrat\Montserrat-Regular.ttf
assets:
- assets/
- assets/images/first_image.jpg
我希望我的代码显示图像,但是我收到一条错误消息,
无法加载资产:assets/images/first_image.jpg
【问题讨论】:
1 - 那么您是否尝试在没有资产文件夹的情况下仅在 Image.asset('images/a_dot_burr.jpeg') 中定义路径? 2 - 你确定你在 lib 基础文件夹中有这个 assets 文件夹吗? 介意用pubspec.yaml
编辑您的问题吗?
【参考方案1】:
Flutter 使用位于项目根目录的 pubspec.yaml 文件来识别应用所需的资产。
flutter:
assets:
- assets/my_icon.png
- assets/background.png
确保您的图片在资产目录中
然后
Widget build(BuildContext context)
// ...
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.png'),
// ...
),
// ...
),
);
//
你应该得到你的图像渲染
【讨论】:
【参考方案2】:用这个更新你的pubspec.yaml
`
fonts:
- family: MontSerrat
fonts:
- asset: assets\fonts\montserrat\Montserrat-Regular.ttf
uses-material-design: true <--- line added ---
assets:
- assets/
- assets/images/first_image.jpg
您也可以查看this,它可能会对您有所帮助
【讨论】:
请结帐,this link 提出了类似的问题【参考方案3】:我通过将资产放在 web 文件夹而不是项目的根目录下解决了我的问题。然后用了
Image.asset(filename)
显示它们。
【讨论】:
以上是关于我在将图像添加到颤振项目时遇到问题的主要内容,如果未能解决你的问题,请参考以下文章
当我将 firebase_core 库添加到我的颤振项目并运行“颤振构建 ipa”时,我遇到了一个问题