当我试图在我的flutter应用程序中添加网络图像时，它会显示无效的图像数据.我该如何解决此问题

Question

Positioned(bottom: -70,
left: 10,
child: Container(
width: 350,
height: 450,
color: Colors.green,
child: Image.network("https://upload.wikimedia.org/wikipedia/en/e/eb/Manchester_City_FC_badge.svg"))

我得到了一个结果"；无效图像数据"；。

Answer 1

这是因为flutter的Image.network不处理svg数据类型。请尝试使用fluftsvg包。

Answer 2

由于在图像小部件中使用svg图像而出现问题，图像小部件不支持svg，因此您需要使用另一个包来使用svg-image。

PS:下载软件包后，卸载应用程序并运行flutter clean并运行pub-get

下载

https://pub.dev/packages/flutter_svg

示例代码

使用这个代替图像小部件

带有网络图像

SvgPicture.network(
'https://site-that-takes-a-while.com/image.svg',
semanticsLabel: 'A shark?!',
placeholderBuilder: (BuildContext context) => Container(
padding: const EdgeInsets.all(30.0),
child: const CircularProgressIndicator()),
);

带资产图像

final String assetName = 'assets/up_arrow.svg';
final Widget svgIcon = SvgPicture.asset(
assetName,
color: Colors.red,
semanticsLabel: 'A red up arrow'
);