我在将图像添加到颤振项目时遇到问题

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”时,我遇到了一个问题

将图像上传到 S3 时遇到内部服务器错误 500

我在将字符串从 .txt 文件添加到列表时遇到问题,即使在尝试使用 .append 之后也是如此

Three.js:在将大多数图像加载到球体的背面时遇到问题

我在将 Css 文件链接到 Django 模板时遇到问题

将项目从对话框添加到 ListView