Image.network或NetworkImage中的图像故障

问题描述 投票:0回答:1

[嗨,我正在从我的服务器中将我的个人资料照片加载到Image.network中,并在综合浏览量中显示以显示下一张照片。但是,当我从互联网上加载图像时,它就会变成小故障,如图所示。

Glitch Image from emulator

但是当我在Google chrome中打开相同的链接时,我的个人资料图片中没有毛刺

Image from google chrome

[这是我以前列出的代码

      photos.forEach((photo) {
        profileImages.add(
          Container(
            child: Stack(
              fit: StackFit.expand,
              children: <Widget>[
                Image(
                  image: NetworkImage(
                    APis().imageApi(
                      photo.photoName,
                    ),
                  ),
                  filterQuality: FilterQuality.low,
                  fit: BoxFit.cover,
                ),
                Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5.0),
                      gradient: LinearGradient(colors: [
                        Colors.black12,
                        Colors.transparent,
                        Colors.black,
                      ], stops: [
                        0.25,
                        0.75,
                        1.0
                      ], begin: FractionalOffset.topCenter, end: FractionalOffset.bottomCenter)),
                ),
              ],
            ),
          ),
        );
      });
      print("profileImages :${photos.length} ${profileImages.length}");
    }

这是我在浏览量中显示的内容

PageView.builder(
  controller: pageController,
  onPageChanged: onPageChanged,
  itemCount: profileImages.length,
  itemBuilder: (context, position) {
  return profileImages[position];
})

所以我的问题是我必须更改任何内容还是必须放置占位符?

flutter flutter-layout
1个回答
0
投票

我处理它的方法是使用一个占位符,所以我使用了堆栈,我将占位符图像放在它的下面,一旦加载,它就显示在顶部。

请参见之前和之后:

image with placeholdersimage already loaded

并且代码几乎是这样的:

ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
            child: Stack(
              alignment: Alignment.bottomCenter,
              children: <Widget>[
                Image.asset('assets/placeholder.jpg',
                fit: BoxFit.cover,
                  width: 600.0,
                  height: 900.0
                ),
                Image.network(imgPath,
                  fit: BoxFit.cover,
                  width: 600.0,
                  height: 900.0
                )]))
© www.soinside.com 2019 - 2024. All rights reserved.