flutter 如何展示来自网络的图片在抖音上?

m3eecexj  于 2022-12-27  发布在  Flutter
关注(0)|答案(6)|浏览(130)

我想在BoxDecoration中显示网络的图像,但是显示错误
“无法将参数类型”image“分配给参数类型”imageProvider“”。
这是代码,我试图显示一个图像从网络内框装饰。请检查,并让我知道我在这段代码的错误。

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

3hvapo4f1#

我已经解决了这个问题,它可以实现使用此代码.

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

9avjhtql2#

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

rdrgkggo3#

Ammy的回答是正确的。但是我想回答我使用BoxDecoration()的经验。
要应用来自互联网或Flutter应用程序中资源的背景图像,我们可以在BoxDecoration()的图像属性中使用DecorationImage()类。
以下是一个代码片段,其中背景图像是从Flutter应用程序中的URL图像应用的:

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


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

1tuwyuhd

1tuwyuhd4#

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,
        ),
      ),
    );
  }
}
vqlkdk9b

vqlkdk9b5#

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

e1xvtsh36#

如果您正在为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 ]
     ]
 );

相关问题