vue.js 在Flutter WebView中拦截远程图像请求并回退到本地资源

你好Flutter社区，
我目前正在做一个涉及Flutter应用程序的项目，该应用程序本质上是Vue 3 Web应用程序的shell，通过webview_flutter包嵌入。但是，我遇到了一个与远程映像的加载时间有关的问题。
Vue 3 Web应用程序包含许多繁重的图像，当远程加载时，可能会花费大量时间，从而影响用户体验。为了缓解这种情况，我正在探索将这些图像与Flutter应用程序捆绑在一起的方法，并在可能的情况下返回到这些本地资产。
我的想法是让Flutter拦截每个远程图像请求。如果所需的图像在本地资源中可用，Flutter应该覆盖请求并返回本Map像。如果不是，远程请求照常进行。
从概念上讲，流程如下：
1.请求远程映像。

Flutter拦截请求。
Flutter检查请求的图像是否存在于本地资源中。
1.如果是，Flutter将返回本Map像。如果没有，Flutter允许远程请求继续。
不幸的是，我发现很难找到这个特定问题的相关资源。大多数Flutter插件或解决方案似乎都是用本地资源来处理本地HTML的上下文，而我的场景是用本地资源来处理远程HTML。
这样的逻辑在Flutter中可行吗？如果是的话，你能在实现方面指导我正确的方向，或者建议任何可能有用的相关插件或工具吗？
此外，如果有其他方法来优化这些沉重的图像在我的上下文中的加载，我很乐意听到你的建议！
谢谢你的时间和帮助。
最好的问候

我想分享我为我的问题找到的解决方案。
最初，有人（谁？）它消失了）建议劫持Flutter缓存，但经过一些研究，我发现这种方法将是相当复杂的，因为它与Flutter和Android的一些低级功能相关联。
我使用了flutter_inappwebview插件。我用它来创建一个本地服务器，允许通过本地URL访问资源。
在VueJS方面，我在Vue3应用程序中创建了一个名为LazyImage的组件，其行为如下：它尝试在本地访问该资源，如果成功，则显示该资源。如果没有，则福尔斯到远程URL。
以下是它的概念证明：
main.dart

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

InAppLocalhostServer localhostServer = new InAppLocalhostServer();

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await localhostServer.start();

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: InAppWebView(
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(),
            ),
            onWebViewCreated: (InAppWebViewController controller) {
              webViewController = controller;
              //This is where my vue webapp is located, it could be remote
              controller.loadUrl(urlRequest: URLRequest(url: Uri.parse("http://192.168.1.16:8080")));
            },
          ),
        ),
      ),
    );
  }
}

在Vue.js方面：
LazyImage.vue

<template>
    <div>
      <img v-if="imageExists" :src="imageUrl" @error="loadFallbackImage" />
    </div>
</template>
  
<script>
export default {
  data() {
    return {
      imageUrl: 'http://localhost:8080/help/image.jpg',
      imageExists: true,
    };
  },
  methods: {
    loadFallbackImage() {
      this.imageUrl = require('@/assets/fallback_image.jpg');
    },
  },
};
</script>

因此，总而言之，flutter_inappwebview插件与自定义Vue组件的结合帮助我解决了利用本地资产而不是远程资产的问题，如果可用的话，而不需要篡改较低级别的功能。
感谢大家的时间和帮助。这个问题现在可以认为已经解决。
最好的问候

vue.js 在Flutter WebView中拦截远程图像请求并回退到本地资源

1条答案

相关问题

热门标签

最新问答