WebView refuses to display images

问题

I've read a tonne of posts about this problem, most of them old so I'm creating a new posting good as of React Native v0.61.5

my problem: I'm retrieving a web page and the files it references, writing them to the app's Documents folder, and attempting to load these into a WebView. These events occur when the user clicks on a button and set the state appropriately

here's how I'm indicating the WebView:

<WebView 
  source={{html: this.state.html, baseUrl: this.state.baseUrl}}
  originWhitelist={['*']}
  allowFileAccessFromFileURLs
  allowFileAccess={true}
/>

and the content of the file. Please note that the logo resides in the same directory as the file that references it:

<h1>per aspera ad astra</h1>
<img src="logo.jpg"/>

the problem I'm having is that I can't see the image. it appears as a small blue image of a question mark. if I look at the baseUrl, it's set to:

file:///Users/ekkis/Library/Developer/CoreSimulator/Devices/9F96B01B-3C66-4ABA-96A5-B58049FB9212/data/Containers/Data/Application/735BD192-FC7B-4708-9973-64C3C9953A0D/Documents

...which seems correct. I'm running this on iOS

I have also tried (as suggested elsewhere):

  source={require(this.state.uri)}

but this fails (I get the error: "Error: TransformError App.js: App.js:Invalid call at line 62:require(this.state.uri)". it makes little sense as require cannot read HTML files but maybe there's supposed to be some black magic there that just isn't working for me. I've also tried simply setting the uri but it also doesn't work (and I can't set the baseUrl in that case)

I'm sure someone out there has done this. it's a base case for this component. I look forward to any guidance

来源：https://stackoverflow.com/questions/60371739/webview-refuses-to-display-images

标签

javascript

ios

react-native

webview