如何使用image.file加载图像

Question

我似乎无法简单地将图像从硬盘加载到屏幕上。 Image.network 看起来很简单。但我不知道如何使用 Image 或 Image.file。图像似乎需要流，所以我认为这不是我正在寻找的。

import 'package:flutter/material.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
    File file = new File("Someimage.jpeg");
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            home: new Image.file(file),  //doesn't work, but no errors
        );
    }
}

我将 Someimage 添加到 pubspec.yaml 文件中，但这也不起作用：

assets:
    - Someimage.jpeg

有人可以给我一个例子来说明这是如何完成的吗？谢谢。

Answer 1

Image

、

ImageProvider

的区别与联系：

Image

：

创建一个显示图像的小部件。

要显示来自网络或资源包的图像，请考虑分别使用 [new Image.network] 和 [new Image.asset]。

所以

Image

是一个小部件。就像 html 中的

<img>

标签一样。

ImageProvider

：

识别图像而不承诺精确的最终资产。这允许识别一组图像，并随后根据环境（例如，环境）解析精确图像。设备像素比。

所以

ImageProvider

就像

src

的

Image

属性。

现在

Image

接受一个参数

image

，它是一个

ImageProvider

。有4种方式获得

ImageProvider

```
AssetImage
```
:

用于加载与 apk 一起打包的一组预定义图像。

例如要显示横幅图像，一些自定义图标。
```
NetworkImage
```
:

用于从互联网加载动态图像。
```
FileImage
```
:

用于从目标设备的文件系统加载图像。

例如显示新下载的图像。
```
MemoryImage
```
:

用于从内存加载原始图像。

例如获取用户的壁纸并将其加载到小部件中。

现在他们都是

ImageProviders

。其中任何一个都可以用作

image

小部件的

Image

属性。 flutter 社区通过向

Image

小部件本身添加扩展类来简化语法。

那么

Image.asset(name)

本质上是

Image(image: AssetImage(name))

，

Image.file(path)

本质上是

Image(image: FileImage(File(path)))

，

Image.network(url)

本质上是

Image(image: NetworkImage(url))

，

Image.memory(list)

本质上是

Image(image: MemoryImage(list))

现在应该清楚了

apk 大小随着资产图像数量的增加而增加。
它们的加载时间（用户看到的内容）通常按顺序排列
```
NetworkImage > FileImage > AssetImage > MemoryImage
```

Answer 2

这里是Image.file的使用示例。这不是推荐的方式，但用例可能是如果您通过 http 在应用程序中下载了图像，然后想要显示该图像（例如，在安装过程中图像未存储在资产中）。

在您的 pubspec.yaml 中，添加：

path_provider: ^0.2.2

代码：

import 'dart:io';
import 'dart:async';
import 'package:path_provider/path_provider.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  Future<File> _getLocalFile(String filename) async {
    String dir = (await getApplicationDocumentsDirectory()).path;
    File f = new File('$dir/$filename');
    return f;
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new FutureBuilder(
            future: _getLocalFile("flutter_assets/image.png"),
            builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
              return snapshot.data != null ? new Image.file(snapshot.data) : new Container();
            })
    );
  }
}

要模拟下载图像，您可以使用 adb 推送图像：

adb push image.png /data/data/com.example.imagetest/app_flutter/flutter_assets/

Answer 3

这是另一个使用 jpg 作为背景图像的示例。它还对图像应用不透明度。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        resizeToAvoidBottomPadding: false,
        appBar: new AppBar(
          title: new Text("test"),
        ),
        body: new Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(
              colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.dstATop),
              image: new AssetImage("assets/images/keyboard.jpg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 4

child: Image.file(
 File('DirectoryLocation/imageName.jpg'),
 height: 45.0,
 width: 45.0,
),

Answer 5

更换

new Image.file(file)

与

FileImage(file)

这应该对你有用。

Answer 6

试试这个：

import 'package:flutter/material.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
                home: new ImageIcon(
                          new AssetImage(
                              "assets/images/image.png"),
                          size: 24.0,
                          color: Colors.white),
        );
    }
}

在 pubspec.yaml 中，您需要：

  assets:
    - assets/images/image.png

Answer 7

您可以将

Image.File

添加为

Container

的孩子

Container(
     padding:
        EdgeInsets.zero,
         height: 150,
               width: 150,
               child: Image.file(File(filePath))
   )

Answer 8

Flutter 在

pubspec.yaml

内包含断言部分，其中包含应用程序的断言。例如：

assets:
    - data_repo/img/ic_launcher.png

1。使用 pubspec.yaml：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: LoadLocalImage()));
}

class LoadLocalImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Load Local Image"),
      ),
      body: new Container(
        decoration: new BoxDecoration(
            image: new DecorationImage(
                image: new AssetImage('data_repo/img/ic_launcher.png'), fit: BoxFit.cover)),
      ),
    );
  }
}

2。使用图像.asset：

import 'package:flutter/material.dart';

    void main() {
      runApp(new MaterialApp(home: LoadLocalImage()));
    }

    class LoadLocalImage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
            appBar: new AppBar(
              title: new Text("Load Local Image"),
            ),
            body: Image.asset(
              'data_repo/img/ic_launcher.png',
              fit: BoxFit.cover,
            ));
      }
    }

文件夹结构： 输出：

请参阅以下链接了解更多说明：

https://flutter.dev/docs/cookbook/images/network-image

Answer 9

如果您的图像在资产中，您可以使用 image.asset 构造函数

Answer 10

先使用这个包：

import 'package:http/http.dart' show get;
import 'dart:io';

Image loadImageFromFile(String path) {
    File file = new File(path);
    Image img = Image.file(file);
}

void storeImageToFile(String path,String url) async {
    var response = await get(Url);
    File file = new File(path);
    file.create(recursive: true).then((val) async {
        if (await val.exists()) {
            await file.writeAsBytesSync(response.bodyBytes);
        }
    });
}

Answer 11

pubspec.yaml 中的资产必须取消注释。
这将有助于按预期加载文件 image.asset。

Answer 12

如果您使用 image_picker 或其他东西上传图像，并希望从您获得的 FileImage(PATH) 中渲染它。您可能需要使用 Image(image: FileImage(File(path))) 格式而不是 Image.file(path)。使用 Image.file(path) 时出现以下错误：

The argument type 'ImageProvider<Object>' can't be assigned to the parameter type 'File'.

如何使用image.file加载图像

问题描述投票：0回答：12

12个回答

最新问题

如何使用image.file加载图像

问题描述 投票：0回答：12

12个回答

最新问题

问题描述投票：0回答：12