Solve the problem of not allowed to load local resource: file:/// when accessing the app local resource image from the web page of uni-app web-view

background

web-viewThere are too many high-resolution videos and pictures on the webpage, and the product manager does not allow the resolution to be blurred. Except for the resolution, lossless compression is almost the limit, but the files are still quite large, resulting in slow loading of the webpage. So I thought it would be very fast to put the video and pictures in app, and then load the local appapplication , but after trying it, I will encounter the same problem as the title.

Solution 1

uni-app web-viewUse overrideResourceRequestthe method of the component to intercept the image resources loaded by the webpage, and redirect back to the local image resources appof the application . The following figure is an example
insert image description here

Solution 2

Put the entire packaged webpage HTMLin appthe source code, and appthen web-viewload this in the component HTML. The picture below is an example I made with native Android (there are too many big pictures and uni-appthe packaged app keeps getting stuck, so I have to use the native test), for reference only.
insert image description here

let a = 1
let b = 2
let c = 3
let d = 4
let e = 5
let f = 6
console.log('a')
console.log('b')
console.log('c')
console.log('d')
console.log('e')
console.log('f')

Guess you like

Origin blog.csdn.net/qq1014156094/article/details/122473392