项目开发接口返回和请求域名不同的图片资源,导致提交线上的时候出现无法访问的问题,
尝试过
结果只是debug直接run的时候chrome给我一个警告提醒,但是对于发布测试环境之后,依然没有效果。还是图片资源无法访问。
最终解决方案:
创建三个文件original_ui.dart,real_ui.dart,html_img_cors_widget.dart
/*
* original_ui.dart
*/
// ignore: camel_case_types
class platformViewRegistry {
static registerViewFactory(String viewId, dynamic cb) {}
}
/*
* real_ui.dart
*/
import 'dart:ui' as ui;
// ignore: camel_case_types
class platformViewRegistry {
static registerViewFactory(String viewId, dynamic cb) {
// ignore:undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(viewId, cb);
}
}
/*
* html_img_cors_widget.dart
*/
// ignore: avoid_web_libraries_in_flutter
import 'dart:html';
import 'original_ui.dart' if (dart.library.html) 'real_ui.dart' as ui;
import 'package:flutter/material.dart';
class HtmlImgCorsWidget extends StatelessWidget {
final String imageUrl;
const HtmlImgCorsWidget({Key? key, required this.imageUrl}) : super(key: key);
@override
Widget build(BuildContext context) {
ui.platformViewRegistry.registerViewFactory(
imageUrl,
(int _) => ImageElement()..src = imageUrl,
);
return HtmlElementView(
viewType: imageUrl,
);
}
}
在需要的地方使用如下:
HtmlImgCorsWidget(
imageUrl: widget.personModel.headImgStr,
),
参考如下:
1.Displaying images on the web:Displaying images on the web | Flutter
HtmlElementView class - widgets library - Dart API
2.https://github.com/flutter/flutter/issues/41563
3.【flutter】完美解决导入 dart.ui 中缺少 platformViewRegistry.registerViewFactory 方法_圆号本昊的博客-CSDN博客
描述:访问一个html连接,请求之后浏览器内容路径会被转发变为域名+‘#/......’,后面的点点点表示一个新的路径名称,而且原来的url的queryParameters参数也没有了。
解决方案:
首先项目里面lib下看是否已经存在generated_plugin_registrant.dart文件,如果没有存在,你可以在yaml文件中引入connectivity_plus(没有非要说这个,只要有web的桥接三方插件都可以),然后flutter pub get执行后就能看到这个文件,
然后在main.dart里面
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
void main() {
usePathUrlStrategy(); //加入这个
runApp(const MyApp());
}