根据类型 flutter 显示来自网络的 svg 或图像

Question

你好，我正在使用一种向我发送图像的服务，有时是 png 或 jpeg 图像，我使用 flutter 小部件 Image。另一方面，有时会给我发送 svg 图像直觉案例我可以使用 flutter_svg 包，但我不知道如何根据图像类型在这些小部件之间切换。

url 上没有任何可用于确定图像类型的内容。

我该怎么做？

更新：来自服务器的示例响应，图像在属性 lexeme_image

{
  "has_tts": true,
  "word": "one",
  "language_information": {},
  "from_language_name": "Spanish",
  "tts": "https://d1vq87e9lcf771.cloudfront.net/joeyn/b53723d682be1114be1cefce3ddbb908",
  "infinitive": null,
  "learning_language": "en",
  "translations": "un, una, uno",
  "learning_language_name": "English",
  "pos": "Numeral",
  "lexeme_image": "https://d2pur3iezf4d1j.cloudfront.net/images/4be10d03a4c6ac4078b6be0df2eb5247",
  "from_language": "es",
  "is_generic": false,
  "lexeme_id": "dd0309fb9cf34f8a2b2e029889c26ec5",
  "related_lexemes": [],
  "canonical_path": "/dictionary/English/one/d3a447831e3322e78309fa3a161c0ebf"
}

Answer 1

与其使用 Image 小部件提供的 .network 构造函数，不如使用如下网络请求检索图像文件：

HttpClient().getUrl(Uri.parse(STRING URL HERE))
    .then((HttpClientRequest request) => request.close())
    .then((HttpClientResponse response) => 
        response.pipe(File('foo').openWrite()));

或使用 await 的更好示例：

HttpClientRequest request = await HttpClient().getUrl(Uri.parse(STRING URL HERE));
HttpClientResponse response = await request.close();

File file = File('foo');
await response.pipe(file .openWrite());

然后使用image library的PngDecoder和JpegDecoder解码器类 isValidFile方法，你可以检查图像是png还是jpeg .示例：

PngDecoder png = PngDecoder();
JpegDecoder jpg = JpegDecoder();

if(png.isValidFile(file) || jpg.isValidFile(file)) {
  //use `Image.file(file)`
}
else {
  //use `SvgPicture.file(file)`
}

如果是其中之一，您可以将检索到的文件传递给 Image.file 构造函数。如果不是，则使用 SvgPicture.file 构造函数。

Answer 2

我也遇到了这个问题，并围绕 svgpicture 和其他图像小部件编写了一个小包装：https://pub.dev/packages/hybrid_image

Answer 3

我为此找到了一个非常简洁的 work-around，这对 me.Hope 来说效果很好，它对你们也有帮助。

首先使用flutter_svg包

现在我假设您获得的图片扩展名为 .svg 或其他图片扩展，例如 .jpg 、 .jpg 等

现在我建议您使用 Image.network 并在 Image.network

的 errorBuilder 属性中传递 SvgPicture 小部件

这是一个相同的例子。

return Image.network(
    cryptoCoins[index]['logo_url'], //extensions like .jpg, .png etc
    height: 90,
    errorBuilder: (context, error, stackTrace) =>
    SvgPicture.network(
    cryptoCoins[index]['logo_url'], // for .svg extension
    height: 90,
       ),
     );

希望对您有所帮助。

根据类型 flutter 显示来自网络的 svg 或图像

Show svg or image from network depending on type flutter

flutter

flutter-dependencies

flutter-layout