[iOS] baseUrl not working. local image is not showing up.

Bug description:

I use the code below to display a local image to Webview.

const imagePath = `${RNFS.DocumentDirectoryPath}/${new Date().toISOString()}.jpg`.replace(/:/g, '-');
const html = `<img src="${imagePath}" style="position: relative; max-width: 100%; max-height: 100%;"/>`;

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

And it works perfectly on Android(emulator, device) and iOS(simulator). However, not work on iOS device.

the image exists. I can display it with the code below on RN.

<Image
    style={{width: 250, height: 250,}}
    source={{
        uri: Platform.OS === 'ios' ?
            imagePath
            : `file://${imagePath}`,
    }}
/>

To Reproduce: I couldn’t find

Expected behavior: the image is displayed on iOS device.

Screenshots/Videos:

Environment:

react-native version: 0.61.5
react-native-webview version: 8.0.4

Issue Analytics

State:
Created 4 years ago
Reactions:8
Comments:8

Top GitHub Comments

3reactions

ambreeshcommented, Sep 22, 2020

I have found a solution for local images rendering in react-native-webview in iOS. convert the image in base64 then used it’s working fine on all iOS devices.

const fs = RNFetchBlob.fs const imageData = await fs.readFile(${imageLocalPath}, ‘base64’) const htmlStr = <html><body><img src="data:image/png;base64,${imageData} ></body> </html>

return (<WebView originWhitelist={[‘*’]} source={{ htmlStr }} />)

2reactions

ambreeshcommented, Aug 26, 2020

The same issue facing with all latest version, I need community support and help to fix it.