Skip to content

Scroll view is not showing base64 images #16695

Closed
Closed
Scroll view is not showing base64 images#16695
Labels
Resolution: LockedThis issue was locked by the bot.

Description

@rjamaro
rjamaro
opened on Nov 6, 2017

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: Windows 10
Node: 8.4.0
Yarn: Not Found
npm: 5.3.0
Watchman: Not Found
Xcode: N/A
Android Studio: 2.3.3

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.50.1 => 0.50.1

Steps to Reproduce

My application does not show base64 images inside a Scrollview

(Write your steps here:)

  1. create a new react-native project
  2. On index.js include App.js and put App being executed
  3. Add a product json file to the project with one product and a property called products where two base64 images will be stored
  4. On App.js create a function to drilll down the object and create an image array of the base64 images
  5. Add a scrollview to render function
  6. Inside the scroll view add a call to the image array

Expected Behavior

The expected behavior was for the images to be displayed in the scroll view as an image carousel allowing the user to scroll through all the images

Actual Behavior

The application does not display the images in the scrollview. As an apart the scrollview doesn't display images stored locally but that have the style property in the image tag.

capture

Reproducible Demo

ScrollImage.zip

Activity

  1. hramos commented on Nov 8, 2017

    @hramos
    hramos
    on Nov 8, 2017
    Contributor

    Can you include the information requested under Environment? Any chance you can repro this on a snack? You'll have more luck getting someone to check your code that way. Thanks!

  2. rjamaro commented on Nov 8, 2017

    @rjamaro
    rjamaro
    on Nov 8, 2017
    Author

    Hi hramos,

    the information about environment was there but in the wrong place. I hope know you can see it, in any case I leave the info below.

    On regards you question about " any chance you can repro this on a snack", sorry, but I got lost :D what is the rerpo and what is a snack?

    I already put my code on stackoverflow, but so far no feedback. In any case if you check the zip, I putted three things:
    1 - an array of buttons that is ok and is displayed on the scrollview
    2 - an array of images reading from a specific location and that also works
    3 - an array of base64 images and that does not work

    On regards the base64 image, I am using the same image in other places of the code, but as a simple image outside a scrollview and it also works.

    Thanks,
    Ricardo

  3. stale commented on Jan 7, 2018

    @stale
    stalebot
    on Jan 7, 2018 · Hidden as outdated
  4. stale
    added
    StaleThere has been a lack of activity on this issue and it may be closed soon.
    on Jan 7, 2018

  5. rjamaro commented on Jan 10, 2018

    @rjamaro
    rjamaro
    on Jan 10, 2018 via email
    Author
  6. stale
    removed
    StaleThere has been a lack of activity on this issue and it may be closed soon.
    on Jan 10, 2018

  7. stale commented on May 16, 2018

    @stale
    stalebot
    on May 16, 2018 · Hidden as outdated
  8. stale
    added
    StaleThere has been a lack of activity on this issue and it may be closed soon.
    on May 16, 2018

  9. react-native-bot commented on May 16, 2018

    @react-native-bot
    react-native-bot
    on May 16, 2018
    Collaborator

    It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

  10. react-native-bot
    added
    ⏪Old Version
    on May 16, 2018
  11. stale
    removed
    StaleThere has been a lack of activity on this issue and it may be closed soon.
    on May 16, 2018
  12. hramos
    removed
    ⏪Old Version
    on Jul 18, 2018

  13. hramos commented on Jul 18, 2018

    @hramos
    hramos
    on Jul 18, 2018
    Contributor

    I took the time to attempt to reproduce this on a Snack, and did not succeed. You can see at https://snack.expo.io/rk89ME6mQ that the images are rendered when displayed inside a scroll view. The issue seems to be elsewhere in your code.

    Minimal repro:

    // App.js

import React, { Component } from 'react';
import { Constants } from 'expo';

import {
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
} from 'react-native';

export default class App extends Component {
  render() {
    var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII=';

    return (
      <View style={styles.container}>
        <ScrollView>
          <Image style={{width: 100, height: 50, resizeMode: Image.resizeMode.contain, borderWidth: 1, borderColor: 'red'}} source={{uri: base64Icon}}/>
          <Image style={{width: 100, height: 50, resizeMode: Image.resizeMode.contain, borderWidth: 1, borderColor: 'red'}} source={{uri: base64Icon}}/>
          <Image style={{width: 100, height: 50, resizeMode: Image.resizeMode.contain, borderWidth: 1, borderColor: 'red'}} source={{uri: base64Icon}}/>
          <Image style={{width: 100, height: 50, resizeMode: Image.resizeMode.contain, borderWidth: 1, borderColor: 'red'}} source={{uri: base64Icon}}/>          
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
		flex: 1,
	}
});
  14. hramos
    closed this as completedon Jul 18, 2018
  15. react
    locked as resolved and limited conversation to collaborators on Jul 18, 2018
  16. react-native-bot
    added
    Resolution: LockedThis issue was locked by the bot.
    on Jul 18, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Resolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions