react-native-webview: can not load local image on IOS

Bug description:

I have use require func to set source attribute，just like source={require('../index.html')}. this html will load local image from CachesDirectoryPath, which src is like file:///var/data/.../cache/../img.png. Now html is successfully loaded,but image can’t show as expect. I have check other issues about this, there is no official answer， every question is closed due to timeout. PS: image source is downloaded form server to cache directory.

To Reproduce:

cause code is privacy, sorry for can not provide it.

Expected behavior:

can display image rightly.

Screenshots/Videos:

Environment:

OS: ios
OS version: 13.7
react-native version: 0.62.1
react-native-webview version: 11.6.2

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 18

Most upvoted comments

const source = Platform.OS === 'ios' ? { uri: 'static.bundle/index.html' } : { uri: 'file:///android_asset/static.bundle/index.html' }
const path = Platform.OS === 'ios' ? '*' : 'file:///android_asset/static.bundle'

<WebView
  ref={webviewRef}
  style={style.container}
  source={source}
  scrollEnabled={false}
  originWhitelist={['*']}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  allowFileAccess={true}
  allowFileAccessFromFileURLs={true}
  allowUniversalAccessFromFileURLs={true}
  allowingReadAccessToURL={path}

it is my webview props

you can try it

Timson020 on Jan 13, 2023

I’m having issues in displaying my local image

just like this <img src="file:///data/user/0/com.company_name/files/RNFetchBlobTmp_ja301cv3cauidw6i95ne" width=576 height=738>

it returns broken image. but when i open the path to my local browser it displays the image.

does anyone having this issue also?

vhonLopez on Aug 31, 2022

Encountered this issue right now. Do you have any solutions?

vhonLopez on Aug 31, 2022