flutter Image.network图片打不开处理 flutter 加载网络图片

转载

mob6454cc6f4a4e 2023-07-08 15:08:37

加入图片的方式：

Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
Image.memory: 加载Uint8List资源图片。

网络资源图片：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.network(
              'http://bug.mvbox.com/data/upload/1/202009/0816094109428nuc.png', 
              // fit: BoxFit.fitHeight,
              // color: Colors.redAccent,
              // colorBlendMode: BlendMode.lighten,
              repeat: ImageRepeat.repeatX,
              // scale: 1.0
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.greenAccent,
          ),
        )
      ),
    );
  }
}

静态资源图片：

如果想配置项目资源文件，需要使用pubspec.yaml文件，把资源文件在这里声明。比如在项目根目录下新建了一个images文件夹，文件夹下面放了一个图片1.jpg，那在pubspec.yaml文件里就要进行声明。代码如下：

assets:
    - images/1.jpg

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.asset('images/1.jpg'),
    );
  }
}

fit属性

fit属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的。