图像未显示在 React Native Image Tag 中

Question

image not display in react native image tag with url: http://p16-sign-sg.tiktokcdn.com/v0201/242656049b324dff81b45d22479a1a61~tplv-noop.image?x-expires=1622659795&x-signature=CA4o%2BuzVVSTyUdH7T08a2%2FPgFpY%3D

const url='http://p16-sign-sg.tiktokcdn.com/v0201/242656049b324dff81b45d22479a1a61~tplv-noop.image?x-expires=1622659795&x-signature=CA4o%2BuzVVSTyUdH7T08a2%2FPgFpY%3D';
<Image
  style={styles.image}
  source={{ uri: url }}
  imageStyle={styles.imageRadius}
  defaultSource={require('assets/loadingImage.png')}
 />

Answer 1

This happened with me in older react native version, fixed after updating. Update react native version.

Answer 2

This is maybe because You are using react native and iOS emulator version 14.

If you are using iOS emulator version 14 then follow these steps to fix your problem

go to file ~> /node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m

go to lines 270-290 and you could see the code like this:

- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  }
}

add an else statement to the if block and make it something like this:

- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  }else {
    [super displayLayer:layer];
  }
}

Then close everything and run command. npm start -- --reset cache for clearing the cache and then launch the app using command npx react-native run-ios this should fix your problem.