Image.networkurl错误或目的地导致404时如何处理。
例如尝试
Image.network('https://image.tmdb.org/t/p/w92')
【问题讨论】：
标签： flutter http-status-code-404
我已经使用 errorBuilder 处理了与 404 相关的网络图像问题。
Image.network('Your image url...',
errorBuilder: (BuildContext context, Object exception, StackTrace stackTrace) {
return Text('Your error widget...');
},
),
【讨论】：
更新：查看使用内置方法的新精确方法，由@Niraj Phutane here 回答，不需要插件。
我建议使用cached_network_image，它提供了添加占位符图像的选项以及在 404 或 403 的情况下添加错误小部件。
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => new CircularProgressIndicator(),
errorWidget: (context, url, error) => new Icon(Icons.error),
),
【讨论】：
CachedNetworkImage 导致应用在状态码为 404 时冻结
用NetworkImageWithRetry代替Network.image
https://pub.dartlang.org/documentation/flutter_image/latest/
例子：
var avatar = Image(
image: NetworkImageWithRetry('http://example.com/avatars/123.jpg'),
);
【讨论】：
new 关键字
NetworkImageWithRetry 会做什么？
flutter_image: ^1.0.0 添加到您的pubspek.yaml 文件中
import 'package:flutter_image/network.dart';
当您在加载图像时发现 404 或任何其他错误时，您可以显示资产中的图像。
我所做的是：
FadeInImage(
image: NetworkImage("imageUrl"),
placeholder: AssetImage(
"assets/images/placeholder.jpg"),
imageErrorBuilder:
(context, error, stackTrace) {
return Image.asset(
'assets/images/error.jpg',
fit: BoxFit.fitWidth);
},
fit: BoxFit.fitWidth,
)
检查imageErrorBuilder 属性。
【讨论】：
您可以使用ImageStream 来处理错误。
class CustomProductImage extends StatefulWidget {
final String image;
const CustomProductImage(this.image);
@override
State<CustomProductImage> createState() => _CustomProductImageState();
}
class _CustomProductImageState extends State<CustomProductImage> {
Widget mainWidget = const CircularProgressIndicator(); // Placeholder widget
@override
void initState() {
super.initState();
Image image = Image.network(widget.image, width: 50, height: 50);
final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
stream.addListener(ImageStreamListener((info, call) {
if (!completer) {
completer = true;
setState(() {
mainWidget = image;
});
}
}, onError: (dynamic exception, StackTrace? stackTrace) {
print('Error is $exception , stack is $stackTrace');
setState(() {
mainWidget = const Icon(Icons.error); // Error Widget
});
}));
}
@override
Widget build(BuildContext context) {
return mainWidget;
}
}
【讨论】：
这很奇怪，但您不能轻松地使用 Image.Provider 正确处理错误。 使用这个方便的包：https://pub.dev/packages/flutter_advanced_networkimage
然后在你的代码中：
backgroundImage: AdvancedNetworkImage(
"YOUR IMAGE URL",
fallbackAssetImage: "YOUR DEAULT ASSERT IMAGE eg:assets/default.png"
)
【讨论】：
我遇到了同样的问题，但是，我使用 FadeInImage 类的属性“imageErrorBuilder”解决了它。
这里有一个链接：https://api.flutter.dev/flutter/widgets/Image/errorBuilder.html
该示例是为 Image.network() 制作的，但它也适用于 FadeInImage。
这是我的代码：
FadeInImage(
imageErrorBuilder: (BuildContext context, Object exception, StackTrace stackTrace) {
print('Error Handler');
return Container(
width: 100.0,
height: 100.0,
child: Image.asset('assets/img/no_disponible.jpg'),
);
},
placeholder: AssetImage('assets/img/loading.gif'),
image: NetworkImage(product.getImg()),
fit: BoxFit.cover,
height: 100.0,
width: 100.0,
),
如果页面方向不存在，则会执行imageErrorBuilder函数。
我正在使用 Flutter 1.20.1
【讨论】：
可以使用 Image.network 或 Image.asset 中的 errorBuilder
Image.network(
path.image,
width: 40,
height: 40,
errorBuilder: (BuildContext context, Object exception,
StackTrace? stackTrace) {
return const Text('?');
},
【讨论】：
我使用了基本的 Image 小部件，并为错误添加了一个错误生成器，并为加载状态添加了一个 loadingBuilder，对于我使用 NetworkImageWithRetry 的实际图像，它会尝试多次加载图像并在最后给你一个错误，如果它无法加载图像。
Image(
image: NetworkImageWithRetry(
'http://ImageUrl.png',),
errorBuilder: (context, exception, stackTrack) => Icon(Icons.error,),
loadingBuilder: (context, exception, stackTrack) => CircularProgressIndicator(),
)
【讨论】：
对于使用 firebase 存储
的用户上述方法对我一点帮助都没有。
当 object is not found 在 firebase 中时，我得到了一个异常 "Null is not a type of List<int>"。
所以我决定验证 Unit8List 值是否有效。
如果它有效，那么我们就可以显示图像，否则使用任何小部件作为占位符。
Future<String?> getImgUrl()async{
//Storage structre: avatars/+919999999999/avatar.jpg
//Permanent url of an image without tokens
//%2F means "/"
//%2B mans "+"
String imgUrl = "https://firebasestorage.googleapis.com/v0/b/yourFIrebaseProjectID/o/avatars%2F%2B919999999999%2Favatar.jpg?alt=media";
try {
Uint8List bytes = (await NetworkAssetBundle(Uri.parse(imgUrl)).load(imgUrl)).buffer.asUint8List();
print("The image exists!");
return imgUrl;
} catch (e) {
print("Error: $e");
return null;
}
}
Widget futureBulder(){
return FutureBuilder(
future: getImgUrl(),
builder: (BuildContext context, AsyncSnapshot<String?> snapshot) {
bool error = snapshot.data==null;
//I use NetworkImage for demonstration purpose, use it whatever widget u want
return CircleAvatar(
backgroundImage: error? null : NetworkImage(snapshot.data!),
);
},
);
}
【讨论】：
我已经为同一个案例实现了这个 StatefulWidget，希望对你有帮助！！！
class NetworkImageHandlerViewer extends StatefulWidget {
final String imageURL;
bool errorFoundInImageLoad = false;
NetworkImageHandlerViewer({
Key key,
@required this.imageURL,
}) : super(key: key);
@override
_NetworkImageHandlerViewerState createState() =>
_NetworkImageHandlerViewerState();
}
class _NetworkImageHandlerViewerState extends State<NetworkImageHandlerViewer> {
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
height: 200,
// height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
// color: Colors.black,
child: (widget.errorFoundInImageLoad)
? Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Unable To Fetch Image",
),
IconButton(
iconSize: 40,
onPressed: () {
setState(() {
if (mounted) {
print("reloading image again");
setState(() {
widget.errorFoundInImageLoad = false;
});
}
});
},
icon: Icon(Icons.refresh),
),
Text(
"Tap Refresh Icon To Reload!!!",
),
],
)
: Image.network(
// widget.question.fileInfo[0].remoteURL,
widget.imageURL,
//
loadingBuilder: (context, child, loadingProgress) =>
(loadingProgress == null)
? child
: Center(
child: CircularProgressIndicator(),
),
errorBuilder: (context, error, stackTrace) {
Future.delayed(
Duration(milliseconds: 0),
() {
if (mounted) {
setState(() {
widget.errorFoundInImageLoad = true;
});
}
},
);
return SizedBox.shrink();
},
),
),
SizedBox(height: 25),
],
);
}
}
【讨论】：
https://pub.dev/packages/extended_image
该插件可以轻松处理网络图像加载中的错误
import 'package:flutter/material.dart';
import 'package:extended_image/extended_image.dart';
class ImageHolder extends StatefulWidget {
const ImageHolder(
{Key? key,
required this.url,
required this.imageHeight,
required this.imageWidth})
: super(key: key);
final String url;
final double imageHeight;
final double imageWidth;
@override
_ImageHolderState createState() => _ImageHolderState();
}
class _ImageHolderState extends State<ImageHolder>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 3),
lowerBound: 0.0,
upperBound: 1.0);
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return ExtendedImage.network(
widget.url,
fit: BoxFit.contain,
cache: true,
loadStateChanged: (ExtendedImageState state) {
switch (state.extendedImageLoadState) {
case LoadState.loading:
_controller.reset();
return Image.asset(
'assets/images/loading.gif',
fit: BoxFit.fill,
);
case LoadState.completed:
_controller.forward();
return FadeTransition(
opacity: _controller,
child: ExtendedRawImage(
image: state.extendedImageInfo?.image,
width: widget.imageWidth,
height: widget.imageHeight,
),
);
case LoadState.failed:
_controller.reset();
state.imageProvider.evict();
return Image.asset(
'assets/images/failed.jpg',
);
}
},
);
}
}
【讨论】：
CachedNetworkImage(
placeholder: (context, url) =>
Center(child: new CircularProgressIndicator()),
errorWidget: (context, url, error) =>
Icon(Icons.error),
imageUrl: image,
fit: BoxFit.fill,
)
【讨论】：