参数无效:URI file:///null 中未指定主机

Question

GetPhotoUrlStream 提供存储在我的云 Firebase FireStore 中的个人资料照片 (data['profilePhoto']) 的 URL 流。 然后被网络图像用来显示个人资料照片(圆形头像)

class GetUserPhotoUrlStream extends StatelessWidget {
final String documentId; // This is your User UID

GetUserPhotoUrlStream(this.documentId);

@override
Widget build(BuildContext context) {
DocumentReference users = FirebaseFirestore.instance.collection('users').doc(documentId);
return StreamBuilder<DocumentSnapshot>(
stream: users.snapshots(),
builder:  (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {

if (snapshot.hasError) {
return Image.asset('assets/images/NouserImage.png');
}

if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}

Map<String, dynamic> data = snapshot.data.data();
return  CircleAvatar(
maxRadius: 80,
backgroundColor: Colors.grey,
child: ClipOval(child: FadeInImage(placeholder: AssetImage('assets/images/NouserImage.png'),image: NetworkImage("${data['profilePhoto']}"),),),

);
},
);
}
}

removeUserPhotoUrl 将 'profilePhotoPhoto' 更新为 null，由 GetUserPhotoUrlStream 使用。

Future<void> removeUserPhotoUrl(BuildContext context) async
{
var user = _auth.currentUser;
DocumentReference users = FirebaseFirestore.instance.collection('users').doc(user.uid);
users.update({'profilePhoto':null}).then((_){
Navigator.pop(context);
});
await deleteUserImage(context);
notifyListeners();
}

当数据['个人资料照片']的值使用removeUserPhotoUrl变为空时，它应该向我显示占位符图像，该图像是提供资产图像，而不是给出错误

错误信息

====================================================================================================
======== Exception caught by image resource service ================================================
Invalid argument(s): No host specified in URI file:///null
====================================================================================================

此外，当应用程序热重载或热重启时，错误消失了，它开始向我显示占位符(资产图像)

我想在"个人资料照片"变为空时立即显示占位符(资产图像)

Answer 1

你需要首先了解 FadeInImage Widget 的作用，

FadeInImage(
placeholder: AssetImage('assets/images/NouserImage.png'),
image: NetworkImage("${data['profilePhoto']}"),
),

简而言之，它的作用是显示您作为小部件提供的占位符，以显示实际网络图像何时从 URL 加载，然后在 URL 作为图像获得响应后，它显示为小部件而不是占位符。

这就是为什么当您热重启或热重载时，整个应用程序UI以及FadeInImage小部件都会被重建。

问题出在哪里：

======== Exception caught by image resource service ================================================
Invalid argument(s): No host specified in URI file:///null
====================================================================================================

上面的消息指出没有指定主机。这意味着您从中获取的数据或 URLdata['profilePhoto']返回一个没有指定http://或https://的 URL。

溶液

您需要确保在data['profilePhoto']中指定主机。

不过，如果您想确保在URL失败时显示您的小部件，则应在FadeInImage中使用imageErrorBuilder属性，如下所示：

FadeInImage(
placeholder: placeholder,
image: image, 
imageErrorBuilder: (ctx, exception, stackTrace) {
return Container(); //THE WIDGET YOU WANT TO SHOW IF URL NOT RETURN IMAGE
},
)

我希望你明白我的意思。