Рендеринг изображения из JSON, сохраненного как base64, с другими данными в React-Native - PullRequest
Новая
       21

Рендеринг изображения из JSON, сохраненного как base64, с другими данными в React-Native

0 голосов
/ 20 апреля 2019

У меня есть JSON-файл, который мое приложение извлекает из API

. Он содержит имя и другую информацию вместе с изображением в кодировке b ase64 

[ { meta: { views: 0, tapped: 0, favs: 0, priority: 0 },
    img: { data: [Binary] },
    special: true,
    _id: 5cace9fbeb520a4d8833bc1b,
    date: 2019-04-09T00:00:00.000Z,
    title: 'Test',
    url: 'http://goole.com',
    body: 'Oh it chaned',
    published: false,
    category: 'Sports',
    location: 'dafasfasf',
    __v: 0,
    publishDate: 2019-04-09T18:30:00.000Z,
    subCategory: 'Footabll' },
  { meta: { views: 0, tapped: 0, favs: 0, priority: 0 },
    img: { data: [Binary] },
    special: true,
    _id: 5cacf8e54b578827e8425c83,
    date: 2019-04-02T00:00:00.000Z,
    title: 'Testasd',
    url: 'http://google.com',
    body: 'wadwadwad',
    published: false,
    category: 'Sports',
    location: 'Random',
    subCategory: 'Footabll',
    __v: 0,
    publishDate: 2019-04-09T18:30:00.000Z },

Это выглядит примерно так

Я не могу отобразить изображение в собственном реактиве

Я получаю Объекты недействительны как объект, обнаруженный React Child с ключами {data}. Я понимаю, что это объект, поэтому эта ошибкапроисходит, но я не могу найти решение для этого (оно говорит мне повторять каждый ключ, пока я хочу получить доступ к определенному ключу).

это функция, которую я вызываю внутри render 

viewfunc(){



return(
  this.state.dataSource.map((item)=>{

    return(

    < View key={Math.random()} style={styles.slide3}>

      <Text style={styles.text}>{item.title}</Text>
      <Image
      style={{
        width: 51,
        height: 51,
        resizeMode: 'contain',
      }}
      source={{
        uri:
          'data:image/png;base64,${item.img.data}',
      }}
    />
      <Text style={styles.body}>{item.body}</Text>

    </View>)

}
))}
))}

Я не могу отобразить это изображение, а также, если я пытаюсь напечатать base64, поместив {item.img.data} в текстовое поле, возвращающие Объекты недействительны .. ошибка Я могу получить доступ к мета с {item.meta.views} Пожалуйста, мне нужна помощь!

edit

Вот как я кодирую его при отправке изображения в базу данных 

var newImg = fs.readFileSync(req.file.path);
var encImg = newImg.toString('base64');

Пробовал тоже 

  <Image
        style={{
          width: 51,
          height: 51,

        }}
        source={{
          uri:
            `data:image/png;base64,`+item.img.data,
        }}
      />

Ещене рендеринг ..

Ответы [ 2 ]

1 голос
/ 20 апреля 2019

Использовать интерполяцию строк с обратными галочками: 

`data:image/png;base64,${item.img.data}`
0 голосов
/ 20 апреля 2019

попробуйте что-то вроде 

     <Image source={ uri: `data:${image.mime};base64,` + image.data, width: image.width, height: image.height }
/>
...