Google Books Thumbail не работает в графическом интерфейсе React Native

#javascript #react-native #jsx #google-books #google-books-api

Вопрос:

Я создаю простое приложение, в котором я беру некоторые URL-адреса из базы данных и отображаю их в карусели изображений. Я делаю это с помощью функции _renderItem (), которую я создал. Однако у меня возникла проблема с изображением в этой функции. Изображение не отображается, за исключением того, что переменная, которую я использую в качестве uri, является фактической ссылкой и не является неопределенной. Это связано с тем, что ссылка на изображение в Google книгах не работает. Однако я уже создавал подобное приложение раньше, и ничего не произошло.

Добавление книги в базу данных:

           <Button
            //icon="login"
            mode="outlined"
            loading={this.state.loading}
            color="black"
            onPress={async () => {
              if (this.state.search == '' || undefined) {
                alert(
                  'That is not a valid ISBN code. If it is, check if you are connected to the internet and try again.',
                );
              } else {
                await axios
                  .get(
                    `https://www.googleapis.com/books/v1/volumes?q=isbn:${this.state.search}amp;key=(not going to reveal my key)`,
                  )
                  .then(async res => {
                    this.setState({
                      results: res.data.items,
                    });
                    console.log(this.state.results[0]);
                    console.log(this.props.route.params.email, 'props');
                    await axios
                      .post('http://localhost:3000/books', {
                        title: this.state.results[0].volumeInfo.title,
                        author:
                          this.state.results[0].volumeInfo.authors.toString(),
                        cover:
                          this.state.results[0].volumeInfo.imageLinks.thumbnail,
                        checkedOut: false,
                        lenderEmail: this.props.route.params.email,
                      })
                      .then(res => {
                        alert('Success! Book has been added.');
                        console.log(res);
                      });
                  })
                  .catch(err => {
                    console.log(err);
                    alert(
                      'That is not a valid ISBN code. If it is, check if you are connected to the internet and try again.',
                    );
                  });
              }
            }}
            contentStyle={{
              width: 175,
              height: 50,
              justifyContent: 'center',
              alignItems: 'center',
            }}
            style={{
              marginTop: 30,
            }}>
            Add The Book
          </Button>
 

Моя функция _renderItem() :

   _renderItem = ({item, index}) => {
    return (
      <TouchableOpacity
        style={{
          marginLeft: 25,
          marginRight: 25,
          borderRadius: 5,
          height: 'auto',
          flex: 1,
          resizeMode: 'cover',
          justifyContent: 'center',
        }}
        onPress={() => {
          this.props.navigation.navigate('Book', {
            image: item.cover,
            title: item.title,
            author: item.author,
            id: item._id,
            checkedOut: item.checkedOut,
          });
        }}>
        <Image
          source={{uri: item.cover}}
          style={{
            borderRadius: 5,
            height: 'auto',
            flex: 1,
            resizeMode: 'cover',
            justifyContent: 'center',
          }}></Image>
      </TouchableOpacity>
    );
  };
 

Кто-нибудь, пожалуйста, может мне помочь?
Спасибо.

Комментарии:

1. Вы хотите сказать, что » localhost:3000/книги » не может быть сохранен должным образом при вызове этой части?

2. Нет, я говорю, что есть проблема с сохранением миниатюры книги.