如何在Flutter的BoxDecoration中显示网络图片？

Question

我想在BoxDecoration中显示网络图片，但是出现了错误：

"参数类型'image'不能赋值给参数类型'imageProvider'"。

以下是我的代码，我试图从网络中显示一张图片并放在BoxDecoration中。请检查并告诉我在这段代码中我错在哪里了。

decoration: new BoxDecoration(
    image: new DecorationImage(image: new Image.network("http://myurl.com/"+productList[index].thumbnail),
    fit: BoxFit.cover)
),

- Ammy Kang

---

以下代码更正是由@Saeed提交的编辑。 Saeed：请将解决方案作为答案提交，而不是作为编辑。装饰：新的BoxDecoration（ 装饰：新的BoxDecoration（ 图像：new DecorationImage（image：new Image.network（“http://myurl.com/”+productList[index].thumbnail）， 图像：new DecorationImage（image：new Image.network（“http://myurl.com/”+productList[index].thumbnail）。图像， 适合：BoxFit.cover） 适合：BoxFit.cover） ）， ）， - Sven Viking

Answer 1

我已经解决了这个问题，可以使用这段代码来实现。

decoration: BoxDecoration(
      image: DecorationImage(image: NetworkImage("urlImage"),
      fit: BoxFit.cover)
    ),

- Ammy Kang

---

如何使用缓存网络图片？我无法使用提供者'CachedNetworkImage' 无法分配给参数类型 'ImageProvider<Object>'。 - undefined

这在新的Flutter中不起作用：“参数类型'DecorationImage'无法赋值给参数类型'ImageProvider<Object>'。” - undefined

Answer 2

如果你想加载 CachedNetworkImage ，那么请按照以下方式使用： *** https://pub.dev/packages/cached_network_image

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

- Muhammad Kashif

---

感谢您的努力，但我不知道如何将此作为容器的框装饰。 - vin shaba

'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider<Object>' - undefined

Answer 3

Ammy的回答是正确的。但我想分享一下我的使用BoxDecoration()的经验。

在Flutter应用中，要么从互联网上获取背景图片，要么从assets获取背景图片，我们可以在BoxDecoration()的image属性中使用DecorationImage()类来实现。

下面是一个代码片段，其中背景图片是从Flutter应用中的URL图像中应用的：

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://www.exampledomain.com/images/background.jpg'),
      fit: BoxFit.fill,
    ),
  ),

因此，要在Container小部件中应用背景图片，我们必须使用decoration属性。 在decoration属性中，我们提供一个新的BoxDecoration()对象，该对象应具有指向图像资源URL的image属性。 在上面的片段中，image属性初始化为指向图像URL的NetworkImage()对象。

- Phan Hero

Answer 4

如果您正在使用装饰器来设置backgroundImage并且想要将CachedNetworkImage用作backgroundImage，则必须使用Stack将Container的背景设置转换为：

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('backgroundimage.img'), <-- Your Background image
    ),
  ),
 child: [ Your Foreground Widgets ]
)

到

Stack(
      children: [
        CachedNetworkImage(
          imageUrl: image,
          fit: BoxFit.cover,
        ),
       [ Your Foreground Widgets ]
     ]
 );

- Agni Gari

Answer 5

import 'package:flutter/material.dart';
 
class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  
  String url = "";          //your url
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: new DecorationImage(
          image: new NetworkImage(url),
        fit: BoxFit.cover,
        ),
      ),
    );
  }
}

- Paras Sharma

Answer 6

Container(
  decoration:BoxDecoration(
    image: DecorationImage(
      image:FileImage(
        File(your_image_path),
      ),
    ),
  ),
),

- Rithea