Question about resourceCustomSchemes load local file

[826327700]

I'm trying to use 'resourceCustomSchemes' to load a local file, the code is as follows. The problem I'm having is that if you use the 'img' tag, the image from the 'local://' protocol is displayed normally, but the 'fetch' request fails to load the image, why is that?

InAppWebView(
            initialUrlRequest: URLRequest(url: WebUri("http://localhost:5173/#/")),
            initialSettings: InAppWebViewSettings(
resourceCustomSchemes: ["local"],
allowUniversalAccessFromFileURLs: true,
allowFileAccessFromFileURLs: true,
),
            onWebViewCreated: (c) {
             controller.webViewController = c;
            },
            onLoadResourceWithCustomScheme: (controller, request) async{
             if(request.url.scheme == "local"){
String path=request.url.toString().replaceFirst("local://", "", 0);
              return CustomSchemeResponse(
               data: File(path).readAsBytesSync(),
               contentType: "application/octet-stream",
               contentEncoding: "utf-8",

              );
             }
             return null;
            }
        )

<template>
<img v-if="filePath" :src="filePath" alt="">
</template>
<script setup lang="ts">
import { ref } from 'vue';

const filePath=ref<string>("")
const addFile=(path:string)=>{
	console.log(path)
	filePath.value=`local://${path}`


	fetch(filePath.value)
		.then(response => response.arrayBuffer())
		.then(buffer => {
			alert("success")
		})
		.catch(error => {
			alert("error")
		});

}

window.addFile=addFile
</script>
<style lang="scss" scoped>

</style>