如何在React Native中显示来自数组的base64图像

Question

I'm pretty new on react-native and I am working on an app that communicates between two user using socket.io

User 1 send à picture to User 2 which should be displayed on User 2 screen : a new container is created on the screen each time User 1 send a picture but nothing is inside...

I use base64 format to store each newPicture in the array newPictures[].

Here is the code of User 2. I receive the base64 string on the console.log(newPictures) so everything else seems to be working, except the rendering of the picture.

Thank you for your help !

export default class DashboardArtificial extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newPicture: "",
      newPictures: []
    };
   }

componentDidMount() {
this.socket.on("new picture", newP => {
  this.setState({ newPictures: [...this.state.newPictures, newP] });
  setTimeout(() => {
    this.setState({
      curTime: new Date().toLocaleString()
    })
  }, 1000);
});
}

render() {
 const newPictures = this.state.newPictures.map(newPicture => {
   console.log(newPicture);
    return (
     <Image
       style={styles.arrayPictures}
       key={newPicture}
       source={{uri: 'data:image/png;base64,{newPicture}'}}
      />
    )
  });

return (
  {newPictures}
  )

Answer 1

You want to use the back ticks to do this, not single quotes. The back tick is a delimiter in ES6 for template literals which can contain placeholders such as {newPicture} which are passed as function.

 <Image
   style={styles.arrayPictures}
   key={newPicture}
   source={{uri: `data:image/png;base64,${newPicture}`}}
  />

If you want to read more about the back tick you can do so here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals