如何在颤动的 BoxDecoration 中显示来自网络的图像？答案

【问题标题】：How to show image from network in flutter BoxDecoration?如何在颤动的 BoxDecoration 中显示来自网络的图像？
【发布时间】：2018-11-15 18:07:17
【问题描述】：

我想在 BoxDecoration 中显示网络的图像。但它显示错误

“参数类型‘image’不能赋值给参数类型‘imageProvider’”。

这是我试图在盒子装饰内显示来自网络的图像的代码。请检查并让我知道我在此代码中的错误之处。

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

【问题讨论】：

标签： image flutter

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

艾米的回答是对的。不过，我想回答一下我使用 BoxDecoration() 的经验。

要应用来自互联网或 Flutter 应用中的资产的背景图片，我们可以在 BoxDecoration() 的 image 属性中使用 DecorationImage() 类。

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

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

)

因此，要在 Container 小部件中应用背景图像，我们必须使用 decoration 属性。在装饰属性中，我们提供了一个新的 BoxDecoration() 对象，该对象应该有一个指向图像资源 URL 的图像属性。在上面的 sn-p 中，图像属性被实例化为指向图像 URL 的 NetworkImage() 对象。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果要加载 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),
),

【讨论】：

【解决方案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,
        ),
      ),
    );
  }
}

【讨论】：