作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在本地 HTML 文件中嵌入图像。并尝试通过 flutter review 加载该 HTML 文件。网页文本正在显示,但没有显示本地引用的图像。
WebView
class _HomeState extends State<Home> {
WebViewController _webViewController;
@override
Widget build(BuildContext context) {
return Container(
color: Colors.orange,
child: WebView(
initialUrl: "",
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller){
_webViewController = controller;
_loadHtmlFromAssets();
},
),
);
}
_loadHtmlFromAssets() async {
String fileHtmlContents = await rootBundle.loadString("assets/test.html");
_webViewController.loadUrl(Uri.dataFromString(fileHtmlContents,
mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
.toString());
}
}
<h1>Hellop</h1>
<img src="myimage.jpg">
最佳答案
您可以使用 flutter_inappwebview
插件。首先在您的 pubspec.yaml
中定义 Assets 目录
assets:
- assets/index.html
- assets/img/
InAppLocalhostServer localhostServer = new InAppLocalhostServer();
void main() async {
await localhostServer.start();
runApp(MyApp());
}
InAppWebView
在您的小部件树中。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: InAppWebView(
initialUrl: "http://localhost:8080/assets/index.html",
initialOptions: InAppWebViewWidgetOptions(
inAppWebViewOptions: InAppWebViewOptions(
debuggingEnabled: true,
)
),
),
);
}
@override
void dispose() {
localhostServer.close();
super.dispose();
}
关于flutter - 如何从 Flutter WebView 访问本地 CSS、JS 和图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56787422/
我是一名优秀的程序员,十分优秀!