Question

我是Flutter的新手，我编写了一个简单的应用程序，可以打开图库，因此用户可以选择一张图片，但是在模拟器和物理设备上我都遇到相同的错误：

════════图像资源服务捕获的异常caught

以下断言被抛出以解决图像编解码器：无法执行加载资产： /data/user/0/com.example.upload_image_example/cache /image_picker915145764706640017.jpg

图片提供者：AssetImage（捆绑：null，名称： “ /data/user/0/com.example.upload_image_example/cache/image_picker915145764706640017.jpg”）图片密钥：AssetBundleImageKey（捆绑包：PlatformAssetBundle＃c486d（），名称： “ /data/user/0/com.example.upload_image_example/cache/image_picker915145764706640017.jpg”，比例：1.0）

我已经检查了路径，照片确实存在于该路径中。

我已更新pubspec.yaml以在资产目录中使用其他图像。但是问题出在我用图像选择器选择照片时：

var photo = await ImagePicker.pickImage(source: ImageSource.gallery);
  setState(() {
      imageFile = photo;
    });

Widget _ImageView() {
    if (imageFile == null) {
      return CircleAvatar(
        radius: 80.0,
        backgroundImage: AssetImage('assets/images/avatar_blank.jpeg'),
      );
    } else {
      return CircleAvatar(
        radius: 80.0,
        backgroundImage: AssetImage(imageFile.path), // <---- HERE I receive the ERROR!!
      );
    }
  }

我在做什么错？

有人有建议吗？

Answer 1

您可以在下面复制粘贴运行完整代码
您需要FileImage

代码段

return CircleAvatar(
        radius: 80.0,
        backgroundImage: FileImage(imageFile),
      );

工作演示

完整代码

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

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

class MyApp extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(      
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  File imageFile;

  void _incrementCounter() async{
    var photo = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      imageFile = photo;
    });

    setState(() {     
      _counter++;
    });
  }

  Widget _ImageView() {
    if (imageFile == null) {
      return CircleAvatar(
        radius: 80.0,
        backgroundImage: AssetImage('assets/images/avatar_blank.jpeg'),
      );
    } else {
      return CircleAvatar(
        radius: 80.0,
        backgroundImage: FileImage(imageFile),
      );
    }
  }

  @override
  Widget build(BuildContext context) {   
    return Scaffold(
      appBar: AppBar(        
        title: Text(widget.title),
      ),
      body: Center(       
        child: Column(          
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _ImageView(),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}

Answer 2

问题在于Flutter对资产映像的理解与资产不同，您可以像这样解决它：

Widget _ImageView() {
if (imageFile == null) {
  return CircleAvatar(
    radius: 80.0,
    backgroundImage: AssetImage('assets/images/avatar_blank.jpeg'),
  );
} else {
  return CircleAvatar(
    radius: 80.0,
    backgroundImage: FileImage(imageFile), // storageImage
  );
}
}

Answer 3

这对我有用：https://stackoverflow.com/a/60368338/8168140

简化代码为：

image: new DecorationImage(
      image: FileImage(_image),
      fit: BoxFit.cover,
),

在Flutter中无法使用image_picker从图库中加载图像失败

3 个答案: