Flutter加载含阿拉伯字符的URL图片失败问题求助

方法1：手动指定编码方式构建URL #

部分服务器对UTF-8编码的URL路径存在兼容问题，可尝试用Latin1编码处理阿拉伯字符文件名，再拼接完整URL：

import 'dart:convert';
import 'package:flutter/material.dart';

// 处理文件名编码
final imageFileName = "ألبوم-لطيفة-2022.png";
final encodedFileName = Uri.encodeComponent(imageFileName, encoding: latin1);
final fullUrl = "http://ar.latifaonline.com/wp-content/uploads/2022/08/$encodedFileName";

// 加载图片
Image.network(fullUrl),

方法2：手动发起HTTP请求加载图片 #

绕开Image.network的自动编码逻辑，直接用HttpClient请求图片字节流：

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

Future<Uint8List> loadArabicImage() async {
  final url = "http://ar.latifaonline.com/wp-content/uploads/2022/08/ألبوم-لطيفة-2022.png";
  final client = HttpClient();
  final request = await client.getUrl(Uri.parse(url));
  // 指定UTF-8编码请求头
  request.headers.set("Accept-Charset", "utf-8");
  final response = await request.close();
  
  if (response.statusCode == HttpStatus.ok) {
    return await response.toBytes();
  } else {
    throw Exception("图片加载失败，状态码：${response.statusCode}");
  }
}

// 通过FutureBuilder展示图片
FutureBuilder<Uint8List>(
  future: loadArabicImage(),
  builder: (ctx, snapshot) {
    if (snapshot.hasData) {
      return Image.memory(snapshot.data!);
    } else if (snapshot.hasError) {
      return const Text("加载失败");
    }
    return const CircularProgressIndicator();
  },
)

方法3：传递原始URL并指定编码头 #

针对不支持URL编码的老旧服务器，直接使用原始URL并添加编码请求头：

Image(
  image: NetworkImage(
    "http://ar.latifaonline.com/wp-content/uploads/2022/08/ألبوم-لطيفة-2022.png",
    headers: {"Accept-Charset": "utf-8"},
  ),
)

内容的提问来源于stack exchange，提问作者Ahmad_Sbaih