Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.