iOS unable to render local images

[srameshr]

The images from asset-library and local image path returned by camera is not being rendered. Works fine with remote images though. Both http and https

[srameshr]

Is it working for others?

[wolfg1969]

I have same problem. downgrade to 1.3 works.

[srameshr]

I want MWPPhotoBrowser its available after 1.4.0

[wolfg1969]

I guess the problem is brought by MWPPhotoBrowser since 1.3.x didn't use it.

[srameshr]

Which native Image viewer does 1.3.x use? I see a lot of problem with MWPPhotoBrowser. It does not render remote images at random.
#87

[wolfg1969]

1.3.x use ScrollView from RN. See 9489a51

[srameshr]

MWPPhotoBrowser provides pinch to zoom. I would need that.

[gitlovenotwar]

Does this support local images? or base64?

[srameshr]

Local

[gitlovenotwar]

@srameshr how about base64 images?

[srameshr]

I have not tried it.

[gitlovenotwar]

I've tried it just now, it's not working on base64

[srameshr]

Yup, right now it only works with https images. Not local or base64.

[wolfg1969]

I found the bounds (https://github.com/alwx/react-native-photo-view/blob/master/ios/RNPhotoView.m#L176) will be zero for the images with file:// uri (loaded from photo library or taken from camera). This makes the scaled image no size.

[wolfg1969]

I created a PR (#96) for this issue.

[srameshr]

@wolfg1969 Could you also look into npomfret/react-native-image-tools#9 and npomfret/react-native-image-tools#4 . I have no idea about objective-c.
Sorry for diverging from the topic of this thread.

[wolfg1969]

@srameshr I'm afraid not. I'm not a objective-c expert too.

[jjdp]

you have to add them manually in your assets in xcode

[ghost]

@wolfg1969 (cc @srameshr) I still have the issue with URLs like asset-library://asset/... from Camera Roll.

[srameshr]

I ditched this library and unsubscribing from this thread.

[wolfg1969]

@kytwb I use react-native-image-picker and it's return file URI works with this library.

[janiokq]

RNPhotoView.m

#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>
#import <AssetsLibrary/ALAssetsLibrary.h>imatgetemporal
#import <AssetsLibrary/ALAsset.h>
#import <AssetsLibrary/ALAssetRepresentation.h>

• (void)setSource:(NSDictionary *)source {
  dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
  if ([_source isEqualToDictionary:source]) {
  return;
  }
  NSString *uri = source[@"uri"];
  if (!uri) {
  return;
  }
  _source = source;
  NSURL *imageURL = [NSURL URLWithString:uri];

    if([uri hasPrefix:@"assets-library://"]){
        
        NSURL *asseturl = [NSURL URLWithString:uri];
        __block ALAssetsLibrary* assetslibrary = [[ALAssetsLibrary alloc] init];
        [assetslibrary assetForURL:asseturl
                       resultBlock:^(ALAsset *asset) {
                           __block ALAssetRepresentation * present = [asset defaultRepresentation];
                           __block CGImageRef imgRef = [present fullResolutionImage];
                           __block UIImage *img = [UIImage imageWithCGImage:imgRef
                                                                      scale:present.scale
                                                                orientation:(UIImageOrientation)present.orientation];
                           [self setImage:img];
                       }
                      failureBlock:^(NSError *error) {
                      }];
        
        
                        return;
  

//
// UIImage *image = RCTImageFromLocalAssetURL(imageURL);
// if (image) { // if local image
//
// [self setImage:image];
// return;
// }
}

    NSURLRequest *request = [[NSURLRequest alloc] initWithURL:imageURL];

[aschmi]

For me local images on my device only work when I have remote js debugging switched on. If it is off I only see a black screen. None of the onLoad events is triggered then.

RN: 0.49.3
react-native-photo-view: 1.5.2

[computerjazz]

I solved this in the iOS sim by prepending file:// to my uri, although I haven't confirmed on device yet though.

The uri returned from the image picker was

/Users/yourUser/Library/Developer/CoreSimulator/Devices/32541D85-B1FD-441F-BB2B-B09850500F6C/data/Containers/Data/Application/DF622A86-5E4B-49C5-8DB5-0141BA339314/Documents/images/E136D41D-47E0-4264-AC79-E0D2A6210F49.jpg

So I changed my source to:

uri: 'file:///Users/yourUser/Library/Developer/CoreSimulator/Devices/32541D85-B1FD-441F-BB2B-B09850500F6C/data/Containers/Data/Application/DF622A86-5E4B-49C5-8DB5-0141BA339314/Documents/images/E136D41D-47E0-4264-AC79-E0D2A6210F49.jpg'

[tommynordli]

I'm still having the issue in 1.5.2, and it doesn't help to prepend file:// to the uri. Anyone with a solution?

@srameshr what library did you use instead?

[srameshr]

I built my own

[scriptgb]

Same problem here.

[ManuBu]

@srameshr Could you show your implementation or put it on GitHub? I have the same problem when getting the images using RN CameraRoll.

[gigby]

@ManuBu
This is my little implementation to fix the current issue - Warecorp@7a77dd5

I didn't implement a common approach because I am needed to show only local images (from document dir).

[tronginc]

I have the same problem. But I have solved this issue.
You may need add width and height to style.

{ this.state.image ? <Image style={{height: 100, width: 100}} source={{uri: this.state.image}} /> : null }