React Native: изображение не отображается с динамическим/локальным URI

поэтому я пытаюсь отобразить изображение с динамическим uri/path (при инициализации он отображает изображение-заполнитель, а затем изменяется) следующим образом:

<Image source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

где this.state.pickedImage инициализируется как null, а затем изменяется с помощью launchCamera и launchImageLibrary react-native-image-picker, как показано ниже:

cameraHandler = () => {
    ImagePicker.launchCamera({title: "Pick an Image", maxWidth: 800, maxHeight: 600}, res => {
        if (res.didCancel) {
            console.log("User cancelled!");
        } else if (res.error) {
            console.log("Error", res.error);
        } else {
            this.setState({
                pickedImage:  res.uri,
                imageSize: res.fileSize,
            });
        }
    });
}}; 

(Должен упомянуть, что я реализовал launchImageLibrary в точно таким же образом, так что я не видел причин размещать его здесь.)

и хотя изображение-заполнитель отображается просто отлично, всякий раз, когда я загружаю новое изображение, <Image/>, похоже, вообще не отображается, и у меня остается только фон.

Что я пробовал:

Я пытался сделать что-то вроде инициализации this.state.pickedImage в моем state, например:

pickedImage: require('./Placeholder.jpeg').uri

а затем добавьте тег изображения, например:

<Image source={{uri: this.state.pickedImage}} />

но, увы, это просто мешает мне отображать какие-либо изображения.

Я подумал о динамической привязке путей к require(), например здесь (а также во многих местах на этом сайте), но, насколько я понимаю, вам нужно заранее знать, какие потенциальные изображения вы хотите получить, и если я использую камеру, я не могу этого сделать. (Кроме того, я не могу заранее настроить список и экспортировать каждое изображение на телефоне пользователя, так что мои руки там связаны.) (Очевидно, нет способа на самом деле динамически привязываться к require () так, как я ищу, потому что менеджер пакетов так не работает )

Могу ли я каким-либо образом отобразить эти uri? Любая помощь приветствуется!

(Кстати, я использую реактивную версию 0.57.4)


person SSBakh    schedule 08.11.2018    source источник


Ответы (3)


Оказывается, решение было довольно глупым, но все, что мне нужно было сделать, это установить ширину и высоту тега, например:

<Image style={{width:100,height:100}} source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

Сначала я пропустил это решение, потому что сделал что-то вроде:

<Image style={{width:'100%',height:'100%'}} source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

и это не работало в то время, но теперь это работает. Я понятия не имею, почему, но это работает только сейчас. Если у кого-то есть какие-либо идеи, почему, я был бы очень признателен, чтобы узнать, почему.

person SSBakh    schedule 09.11.2018

Какую «реактивную» версию вы используете? Это не работает на всех платформах? require('./image.jpg') должно работать, возможно, что-то не так с вашим URI. Или попробуйте загрузить с Image.resolveAssetSource(source);

person Slava    schedule 08.11.2018
comment
Я использую реактивную версию 0.57. Я не думаю, что в этой версии реакции есть какие-либо ошибки, насколько мне известно. Кроме того, глядя на это прямо сейчас, насколько я понимаю, Image.resolveAssetSource, похоже, только преобразует путь в uri, что, похоже, не очень помогает. (facebook.github.io/react-native/docs/image#resolveassetsource) - person SSBakh; 08.11.2018

Я думаю, что ваш res.uri не в порядке.

В моем проекте, где я загружаю изображения из галереи, у меня есть res.node.image.uri , например:

 <Image style={styles.imageItem}
    source={{ uri: res.node.image.uri }}
 />
person oma    schedule 08.11.2018
comment
Я пробовал это, но это действительно не сработало. Если бы проблема заключалась в путях, которые я использовал, то я бы столкнулся с ошибкой с require(), который я использовал выше, поскольку я использовал точно такой же путь, когда инициализировал pickedImage как require("[PATH]").uri. - person SSBakh; 08.11.2018
comment
хм .. если вы console.log() this.state.pickedImage какой выход ? - person oma; 08.11.2018