请问Image怎么加载带有referer的网络图片?

请教一下,Image组件在加载网络图片时候,该图片是云存储上的图片,云储存那边设置了referer验证,我在代码里面该怎么设置?现在的情况是无法显示该图片。以前做安卓开发时候,图片加载框架如Glide,Coil等,都有设置Head头的方法,Image组件我没有找到这么设置Head头。


Image
云储存
2024-04-03 14:38:31
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
mr_lzj

Image组件并不是像Glide那样很强大的框架,可以使用http下载图片再生成pixelmap去显示


分享
微博
QQ
微信
回复
2024-04-03 16:37:51
忙忙忙困困困

在Flutter中,可以使用​​Image.network​​​组件加载网络图片,但是目前​​Image.network​​​并没有直接支持设置HTTP头部的功能。不过,你可以使用​​dart:io​​​库中的​​HttpClient​​​来手动发送带有referer头部的HTTP请求,然后将返回的图片数据转换为​​Uint8List​​​,最后使用​​Image.memory​​组件来显示该图片。

以下是一个简单的示例代码,演示了如何加载带有referer的网络图片:

import 'dart:typed_data';
import 'dart:io';
import 'package:flutter/material.dart';

class RefererImage extends StatefulWidget {
  final String imageUrl;
  final String referer;

  RefererImage({required this.imageUrl, required this.referer});

  @override
  _RefererImageState createState() => _RefererImageState();
}

class _RefererImageState extends State<RefererImage> {
  late Uint8List _imageBytes;

  @override
  void initState() {
    super.initState();
    _loadImage();
  }

  Future<void> _loadImage() async {
    HttpClient httpClient = HttpClient();
    httpClient.badCertificateCallback = (cert, host, port) => true;
    HttpClientRequest request = await httpClient.getUrl(Uri.parse(widget.imageUrl));
    request.headers.set('Referer', widget.referer);
    HttpClientResponse response = await request.close();
    _imageBytes = await consolidateHttpClientResponseBytes(response);
    httpClient.close();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return _imageBytes != null
        ? Image.memory(_imageBytes)
        : CircularProgressIndicator();
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Referer Image Example')),
      body: Center(
        child: RefererImage(
          imageUrl: 'https://example.com/image.jpg',
          referer: 'https://example.com',
        ),
      ),
    ),
  ));
}

在上面的示例中,我们创建了一个自定义的​​RefererImage​​组件,该组件接受一个​​imageUrl​​和​​referer​​作为参数,然后使用​​HttpClient​​发送带有referer头部的HTTP请求,获取图片数据并显示出来。

分享
微博
QQ
微信
回复
2024-04-05 14:24:38
相关问题
HarmonyOS Image 加载网络图片问题
748浏览 • 1回复 待解决
Image组件如何加载网络图片
2625浏览 • 1回复 待解决
关于Image组件加载网络图片问题
596浏览 • 1回复 待解决
请问Image控件是怎样设置网络图片
10344浏览 • 3回复 已解决
服务卡片image怎么获取网络图片
6999浏览 • 2回复 待解决
HarmonyOS Image Kit 网络图加载
165浏览 • 1回复 待解决
HarmonyOS Image组件网络图片不显示
389浏览 • 1回复 待解决
HarmonyOS Image组件无法显示网络图片
1055浏览 • 1回复 待解决
HarmonyOS 网络图片加载不显示
82浏览 • 1回复 待解决
页面加载前获取网络图片宽高
691浏览 • 1回复 待解决