File system image in react-native-webview source

Question

I use expo-file-system to download files to the local app directory for offline usage. The path might look something like this:

file:///var/mobile/Containers/Data/Application/12D5D997-A9A4-4E09-8A89-E090B7CCCER2/Documents/images/01G10S48A91Q5TQ0TM32DDNJNK/icon/icon-512.png

Now I want to show this image in a react-native-webview:

[other code]

const source = {
   html: `
      <!DOCTYPE html>
      <html>
      <body>
            <h1>Hello stackoverflow</h1>
            <img src="./icon-512.png" alt="This image doesn't show"></img>
            <p>A little paragraph</p>
      </body>
      </html>
      `,
      baseUrl:
        'file:///var/mobile/Containers/Data/Application/12D5D997-A9A4-4E09-8A89-E090B7CCCER2/Documents/images/01G10S48A91Q5TQ0TM32DDNJNK/icon/'
    };

return 
    <WebView
        source={source}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        originWhitelist={['*']}
      />

The heading and paragraph are shown, but the image is not found. What am I missing?

This has only been tested on iOS.

Thanks

File system image in react-native-webview source

0 Answers0