Невозможно показать изображение в React Native

Я использую action-native 0.28.0

Я пытаюсь показать изображение на симуляторе iPhone в соответствии с этим учебным пособием: http://www.appcoda.com/react-native-introduction/

var styles = StyleSheet.create({
image: {
    width: 107,
    height: 165,
    padding: 10
  }
}

var imageURI = 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api'

Затем в функции render() я добавляю следующее:

<Image style={styles.image} source={{uri:imageURI}} />

Пространство, выделенное для изображения, есть, но изображение не отображается.

Ответы

Ответ 1

В дополнение к ответу Джонатана Стеллвага, 1-е решение работает только в том случае, если URI использует https или установил безопасность транспорта приложений.

См. Не удается показать изображение по URI в React Native iOS Simulator

Ответ 2

Надеюсь, что следующие решения могут помочь вам - все может быть использовано для изображения

1. HTTPS-решение:

Ваша фотография предоставлена URI - source={{uri:imageURI}}

Пример: source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}

Важно: не забудьте установить клип дважды: {{}}

2. HTTP-решение:

Если вы хотите http, посмотрите следующее решение - проблема HTTP Github

Решение: - HTTP-решение

3. Local-Picture

Сохранить: создайте новую папку для ваших изображений и сохраните их там (папка: images)

Требовать: запрашивать изображение, которое вы сохранили локально, используя синтаксис среди

var yourPicture = require ('./images/picture.jpg');

Обозначения для той же папки ('./')
Обозначение вышеуказанной папки ('../')
Запись для дополнительной папки выше ('../../../')

Использование: Используйте ваше изображение в функции рендера

render(){
    return(
        <Image source={yourPicture}/>
    )
}

Стиль ваших изображений работает так, как вы описали

Ответ 3

При добавлении тега Image и использовании uri необходимо проверить следующее:

Добавление стиля ширины и высоты для тега изображения:
например:
<Image source={{uri: 'https://reactjs.org/logo-og.png'}} style={{width: 400, height: 400}}/>
Имидж док
Использование HTTP-URL: вам нужно включить транспортную безопасность приложения
Приложение транспортной безопасности для iOS
Использование HTTPS URL: он будет работать нормально

Ответ 4

Для тех, кто попадает сюда, если принятый ответ не сработал для вас, убедитесь, что ваше изображение имеет надлежащий стиль. Для импортированных изображений uri вам нужно будет установить как высоту, так и ширину.

Ответ 5

Моя проблема была в пути. /storage/emulated/0/Android/data/com.blah/blah.jpeg react-native-fs возвращает путь, например /storage/emulated/0/Android/data/com.blah/blah.jpeg но для компонентов Image требуется, чтобы он был file:///storage/emulated/0/Android/data/com.blah/blah.jpeg

Ответ 6

Ребята, может быть, это из-за того, что фоновое изображение покрыло изображение, знайте о фоновом изображении и постарайтесь прокомментировать его, если все решение здесь не работает.

Для меня это проблема, с которой я сталкиваюсь.

Ответ 7

У меня была точно такая же проблема, и я решил установить то, что у вас получилось как var styles =... для const styles =... и чтобы это решило мою проблему.