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

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

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

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

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() не нужно ищет, потому что менеджер пакетов не работает таким образом)

Есть ли способ, которым я могу сделать это uris? Любая помощь приветствуется!

(Я использую реагировать родной 0.57.4 кстати)

Источник

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}}/>

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

Источник

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

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

 <Image style={styles.imageItem}
    source={{ uri: res.node.image.uri }}
 />
Источник

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

Источник
Другие вопросы по тегам