Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<Image> components with a base64 URI sometimes do not initially render. #12120

Closed
ChristianTucker opened this issue Jan 30, 2017 · 13 comments

Comments

Projects
None yet
@ChristianTucker
Copy link

commented Jan 30, 2017

--- Please use this template, and delete everything above this line before submitting your issue ---

Description

When using the React-Native <Image /> component with a base64 encoded image, sometimes the image does not display, when rendering multiple Image components at the same time. The image is left blank, and will sometimes come up during a re-render. I've debugged and made sure that the uri was available during the render method, I see no reason for the image to not appear. It's not always the same images that do it. It's complete random. Sometimes they will all load. Sometimes random ones will stay blank. Sometimes they'll show up after scrolling around the page. Sometimes they won't.

Reproduction

Just create a page with several images loading different base64 sources. {uri: 'base64string'}

Solution

Unknown. I've tried several hacks to force re-renders and everything.

Additional Information

  • React Native version: 0.40
  • Platform: iOS, haven't tested Android.
  • Operating System: MacOS
@ivpusic

This comment has been minimized.

Copy link

commented Feb 12, 2017

the same for me, but for normal images. Did you find something to solve this?

@ChristianTucker

This comment has been minimized.

Copy link
Author

commented Feb 12, 2017

@ivpusic it seems like this problem may only exist on the Simulator. Can you confirm? We published our application through TestFlight (distribution mode) and the problem did not persist.

@Jammyvm

This comment has been minimized.

Copy link

commented Jun 7, 2017

I'm having the same problem in android, in the simulator and in a tablet with a release version. Anyone have a fix to this?

@raytorres280

This comment has been minimized.

Copy link

commented Jun 10, 2017

Currently dealing with same issue.

@ghost

This comment has been minimized.

Copy link

commented Jun 19, 2017

This problem is more frequent in devices with low memory. Please provide some solution

@hramos

This comment has been minimized.

Copy link
Contributor

commented Aug 24, 2017

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

  • Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
  • If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
  • Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

@hramos hramos added the Icebox label Aug 24, 2017

@hramos hramos closed this Aug 24, 2017

@RamKrish2079

This comment has been minimized.

Copy link

commented Sep 17, 2017

I faced the same problem with this image component where image not rendered initially.

import React from "react";
import { View, Image } from "react-native";
const GridImage = props => {
  const { image } = props;
  return <Image style={styles.container} source={image} />;
};

export default GridImage;

styles = {
  container: {
    height: 50,
    width: 50,
    tintColor: "#f00"
  }
};

but the image rendered while hot-reloading
and I later found that i missed to declare styles as constant

working code with const styles :

const GridImage = props => {
  const { image } = props;
  return <Image style={styles.container} source={image} />;
};

const styles = {
  container: {
    height: 50,
    width: 50,
    tintColor: "#f00"
  }
};
@rawrmaan

This comment has been minimized.

Copy link
Contributor

commented Nov 30, 2017

Still seeing this as of 0.49.4.

@quantumproducer

This comment has been minimized.

Copy link

commented Feb 16, 2018

Bump, my image loaded from base64 is blank.

@lakhwinder99

This comment has been minimized.

Copy link

commented Mar 26, 2018

Same issue with me.. revisit to image gallery page returns blank images for images received from server response. Images received in log

@sadeghtkd

This comment has been minimized.

Copy link

commented Jun 20, 2018

I had the same problem, After I added height and width to the image the problem resolved.

@hpmax00

This comment has been minimized.

Copy link

commented Jul 13, 2018

+1, with device and simulator

@michaelaflores

This comment has been minimized.

Copy link

commented Jul 14, 2018

Have this issue as well.

@facebook facebook locked as resolved and limited conversation to collaborators Aug 24, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.