flutter assets配置加载本地图片报错

首选列出我在照着网上说的设置assets怎么搞都报错,错误如下,搞的我想骂娘。

flutter:

uses-material-design: true

assets:

  • assets/images

后来找到了下面这个教程,才终于解决,就是要在后面加一个"/" 。

flutter这个大傻逼yaml配置文件太傻逼了吧。差评!!!

**在Flutter中,不需要将每个图片单独列出来。**‌你可以通过指定一个包含所有相关图片的目录来实现资源的批量引用,而不需要逐个列出每个文件。这种方法不仅简化了配置过程,还提高了开发效率‌。

pubspec.yaml文件中声明资源时,你可以选择逐个指定文件或通过子目录批量指定。逐个指定需要提供文件的完整相对路径,而批量指定只需在目录名后加上路径分隔符即可。需要注意的是,目录批量指定并不递归,只有该目录下的文件可以被包括,如果有子目录,需要单独声明子目录下的文件‌。

例如,如果你有一个名为assets的文件夹,其中包含多个图像文件和一些子文件夹,你可以这样声明:

flutter:

assets:

- assets/image1.png

- assets/images/

这里的assets/images/表示所有位于assets/images目录下的文件都将被包含进来,而不需要逐个列出每个文件‌。这里着重强调的最新版的flutter在设置目录的时候一定要带上最后的"/",不然会报错。

最后,完成资源的声明后,就可以在代码中通过Image.asset()方法访问这些资源了。例如:

dartCopy Code

Image.asset('assets/image1.png')

或者

Image.asset('assets/images/mine/navBack.png')

这样,Flutter会自动从声明的资源中查找并加载相应的图片‌。

复制代码
import 'package:flutter/material.dart';


class SplashPage extends StatefulWidget {
  const SplashPage({super.key});

  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  Widget build(BuildContext context) {
     return  Scaffold(
          body: Stack(
            children: [
                 Image.asset(
                      'assets/images/ic_launcher.png',
                      fit: BoxFit.cover
                ),
                  Image.asset(
                      'assets/images/bg.jpg',
                      fit: BoxFit.cover
                )
            ],
          )
     );
  }
}

最后图片终于显示出来了:

相关推荐
Bruce_Liuxiaowei19 分钟前
一键清理Chrome浏览器缓存:批处理与PowerShell双脚本实现
前端·chrome·缓存
怒放的生命199119 分钟前
Vue 2 vs Vue 3对比 编译原理不同深度解析
前端·javascript·vue.js
GDAL27 分钟前
html返回顶部实现方式对比
前端·html·返回顶部
Violet_YSWY27 分钟前
ES6 () => ({}) 语法解释
前端·ecmascript·es6
LYFlied30 分钟前
【每日算法】LeetCode 279. 完全平方数(动态规划)
前端·算法·leetcode·面试·动态规划
小北方城市网33 分钟前
第7课:Vue 3应用性能优化与进阶实战——让你的应用更快、更流畅
前端·javascript·vue.js·ai·性能优化·正则表达式·json
向下的大树34 分钟前
React 环境搭建 + 完整 Demo 教程
前端·react.js·前端框架
音浪豆豆_Rachel38 分钟前
Flutter鸿蒙化之深入解析Pigeon可空返回与参数设计:nullable_returns.dart全解
flutter·harmonyos
2501_916007471 小时前
React Native 混淆在真项目中的方式,当 JS 和原生同时暴露
javascript·react native·react.js·ios·小程序·uni-app·iphone
IT_陈寒1 小时前
Python性能翻倍的5个隐藏技巧:让你的代码跑得比同事快50%
前端·人工智能·后端