ios: Local image not rendering

[pbfrias17]

Using FastImage with source={{ uri: 'local_uri' }} does not work on ios. Works fine on android, or if I use some remote url instead. Tried with different styles. Setting fallback true doesn't seem to do anything either.

Currently on "react-native-fast-image": "^5.1.2", and "react-native": "0.57.7"

[laukaichung]

@pbfrias17 I have the same problem. In my case, the local images won't load because they do not have extensions. Try adding an extension like ".png" and see if it works for you. Currently I have to switch back to the default <Image/> component to load local images on IOS.

Currently on "react-native-fast-image": "^5.1.2" and react-native 0.58.5

[mikerodham]

@pbfrias17 & @laukaichung What are you using for a local_uri as I'm saving files from my server to my device using RNFetchBlob and then generating local uri's with those files and it loads them just fine.

I have my SO question here https://stackoverflow.com/questions/54980928/making-images-load-before-render my issue was the speed, but this component helped out great.

[loikfb]

@mikerodham I have the same issue, maybe try to add a local image natively in the IOS project -> Images.xcassets and then use it like this : source={{ uri: 'local_image_from_xcassets' }} in the FastImage component.

It work perfectly on Android with images in "res/drawable" folder.

Currently on "react-native-fast-image": "^6.0.0", and "react-native": "0.59.5"

[stevejboyer]

edit: see valeriashpiner's answer below about setting height/width -- that appears to have fixed it for me too!

I have the same issue as well. I'm unable to load images from the phone's camera roll (iOS -- haven't tested Android). Loading from a web URL works fine.

[email protected] [email protected]

[kevtran410]

i have same issue, seem to be not support HEIC image taken by iphone.

[OmarBasem]

same issue

[sinhpn92]

I have same issue. have any suggest to solve it?

[loikfb]

I have same issue. have any suggest to solve it?

Just use Image from react-native on IOS, my rendering issue with images was only on Android. Even with a release build.

[madandrija]

@mikerodham I have the same issue, maybe try to add a local image natively in the IOS project -> Images.xcassets and then use it like this : source={{ uri: 'local_image_from_xcassets' }} in the FastImage component.

It work perfectly on Android with images in "res/drawable" folder.

Currently on "react-native-fast-image": "^6.0.0", and "react-native": "0.59.5"

Local image added natively doesn't load images for me, local image in the JS project get loaded. Current workaround is to load it as an Image from react-native (as it seems that for this case there is no difference) Currently on "react-native-fast-image": "6.1.1", and "react-native": "0.59.9"

[teddychoi]

iOS only loads base64 encoded blob or remote url, whereas Android can load local image uri. Hope it be fixed.

[rollsroyc3]

Any updates on this? Running into same issue..

[xclidongbo]

same issue

[mikerodham]

I've found that this package does not work with "required/local" images. You cannot use <FastImage src={require('myImage.png')}/> instead however, you can use your required images just using the standard image library. Since these are compiled in to the build of the application, I find there's no loading time. Example below.

const myImage = require('someImage.png');

render() {
  return (
    <Image src={myImage} resizeMode={'cover'}/>
  );
}

If you're downloading images from an API of some sorts, or even direct URL's and saving them for caching purposes using something like RNFS you can use a local uri to display that image.

I like to do something like this as it works around my application.

let dirs = RNFetchBlob.fs.dirs;

RNFetchBlob.fs.ls(dirs.DocumentDir)
  .then((files) => {
    for (var i = 0; i < files.length; i++) {
      let fileName = files[i].split('.');

      if (fileName[0] === 'background') {
        window.local_background = dirs.DocumentDir + '/' + files[i];
        continue;
      }

      if (fileName[0] === 'logo') {
        window.local_logo = dirs.DocumentDir + '/' + files[i];
        continue;
      }
    }
  })

This allows me to simply call something like:

if (window.local_background.length > 0) {
  return ( 
    <FastImage style={styles.backgroundImg}
    source={
      {
        uri: window.local_background,
        priority: FastImage.priority.high,
      }
    }
    resizeMode={FastImage.resizeMode.cover}
    />
  )
} else {
  return ( 
    <Image style={styles.backgroundImg} source = {myProjectLocalImage} resizeMode = {'cover'}/>
  )
}

I hope this helps with everyones confusion about local images.

[valeriashpiner]

I found solution. If your image like this require('someImage.png'), you should put width and height for it with styles and it will work.

[DovletAmanov]

I found solution. If your image like this require('someImage.png'), you should put width and height for it with styles and it will work.

This one worked for me! Thanks

[jemise111]

@pbfrias17 Were you ever able to find a fix?

My workaround was modifying the src/index.js to look like

const resolvedSource = Image.resolveAssetSource(source as any)
const isExternalImage =
    resolvedSource &&
    resolvedSource.uri &&
    (resolvedSource.uri.includes('http') ||
        resolvedSource.uri.includes('https'))

if (Platform.OS === 'ios' && !isExternalImage) {
    fallback = true
}

    if (fallback) {
        return (
            <View style={[styles.imageContainer, style]} ref={forwardedRef}>
                <Image
                    {...props}
                    style={StyleSheet.absoluteFill}
                    source={resolvedSource}
                    onLoadStart={onLoadStart}
                    onProgress={onProgress}
                    onLoad={onLoad as any}
                    onError={onError}
                    onLoadEnd={onLoadEnd}
                    resizeMode={resizeMode}
                />
                {children}
            </View>
        )
    }

But I'm not sure if that's really a great strategy..

[NitinVatsya]

I found solution. If your image like this require('someImage.png'), you should put width and height for it with styles and it will work.

I am passing the height/width for image container and FastImage component as well <FastImage style={imageViewStyle} source={{ uri: 'https://assets.alliedelec.com/f_auto,q_auto,c_scale,w_100/70102769.jpg', }} resizeMode={FastImage.resizeMode.contain} onError={_imageLoadFailed} onLoadEnd={_imageLoaded} height={100} width={100} /> but still not getting the image.

[ghost]

WITH NATIVE <IMAGE> It works but not working with fast image <FastImage style={{ width: 120, height: 120, borderRadius: 1, }} source={{ uri: item.node.image.uri, priority: FastImage.priority.low, cache: FastImage.cacheControl.immutable, headers: { 'Content-Type': 'image/jpeg', 'x-api-key': item.token } }} onError={(e) => { console.log('e', e); }} resizeMode={FastImage.resizeMode.stretch} />

[ghost]

I found solution. If your image like this require('someImage.png'), you should put width and height for it with styles and it will work.

I am passing the height/width for image container and FastImage component as well <FastImage style={imageViewStyle} source={{ uri: 'https://assets.alliedelec.com/f_auto,q_auto,c_scale,w_100/70102769.jpg', }} resizeMode={FastImage.resizeMode.contain} onError={_imageLoadFailed} onLoadEnd={_imageLoaded} height={100} width={100} /> but still not getting the image.

Yeah it's not working.

[GrabbenD]

Same issue here

[f-ricci]

I have ran into the same issue (tested only on iOS) but this error is not specific to local images because if you save your images inside the app's folder and then load them with FastImage it works properly.

It's either that the path from which it is being loaded ph://... or the image extension are not supported by the library.

[flyskywhy]

const directoryPath = Platform.OS === 'android' ? RNFS.PicturesDirectoryPath : RNFS.DocumentDirectoryPath;

<FastImage
  style={YOUR_IMAGE_STYLE}
  source={{uri: `file://${directoryPath}/${YOUR_IMAGE_FILE_NAME}`}}
/>

PS: on Android, must use file://

PS: Need enable fs permission, ref to ENOENT: open failed: EACCES (Permission denied), open '/storage/emulated/0/Download/ on Android, and IOS file downloaded not able to be located on device on iOS.

[jzxchiang1]

Had the same issue on iOS.

[jzxchiang1]

I ctrl+f all instances of <Image ...> and replaced with <FastImage ...>.

It worked for all network-loaded images without any further modifications. However, local images loaded with uri (and not require) did not render at all.

[blueberry6401]

I suppose this will not be fixed?

[code-by]

same problem for me