Question

我似乎无法简单地将硬盘中的图像加载到屏幕上。 Image.net工作似乎很简单。但我无法弄清楚如何使用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.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 2

这是使用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 3

试试这个：

  assets:
    - assets/images/image.png

在pubspec.yaml中，您需要：

df

Answer 4

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

Answer 5

Image，ImageProvider之间的区别和关系：

Image：

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

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

因此Image是一个小部件。就像html中的<img>标签一样。

ImageProvider：

标识图像而无需提交精确的最终资产。这允许识别一组图像，并且随后基于环境（例如环境）解析精确图像。设备像素比率。

所以ImageProvider就像src的{{1}}属性。

现在Image接受一个Image的参数image。有四种获取ImageProvider

的方法

ImageProvider：

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

例如要显示横幅图像，请使用一些自定义图标。

AssetImage：

用于从Internet加载动态图像。

NetworkImage：

用于从目标设备中的文件系统加载图像。例如显示新下载的图像。

FileImage：

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

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

现在它们都是MemoryImage。它们中的任何一个都可以用作ImageProviders小部件的image属性。而且flutter社区通过向Image小部件本身添加扩展类来简化了语法。

所以

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)

现在应该清楚了

资产的apk大小随着资产图片的数量而增加。
他们的加载时间（用户看到的时间）通常按顺序排列

Image(image: MemoryImage(list))

Answer 6

如果资产中的图片可以使用image.asset构造函数

Answer 7

首先使用此软件包：

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 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。使用Image.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.File添加为Container的孩子

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

Answer 10

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

Answer 11

替换

new Image.file(file)

使用

FileImage(file)

这应该对您有用。

Answer 12

它可能帮助您寻找更多内容来解决与从存储加载文件（即 Someimage.jpeg ）相关的问题。让我解释一下。

首先你应该知道一些重要的点。

在 flutter 中，Folder 被称为 Directory。
内置存储本身就是一个目录，其路径为'/storage/emulated/0/'，可以使用Directory('/storage/emulated/0/')访问强>
同样的下载文件夹路径是'/storage/emulated/0/Download/'，可以使用Directory('/storage/emulated/0/Download/')访问强>
下载文件夹中图片的路径可以是'/storage/emulated/0/Download/Someimage.jpeg'
Camera 文件夹中图片的路径可以是 '/storage/emulated/0/DCIM/Camera/Someimage.jpeg' ，等

如果您在查找路径时遇到任何问题，只需打开文件管理器并检查文件（图像）详细信息，您会在其中找到.

示例：-

Align(
alignment: Alignment.topCenter,
child: Image.file(
File('/storage/emulated/0/DCIM/Camera/Someimage.jpeg'),
fit: BoxFit.contain,
),
),

确保您拥有存储访问权限。

如何使用image.file加载图像

12 个答案: