Блог

Главная - Вопросы по программированию - Как я могу использовать изображение по умолчанию, если URL-адрес изображения выдает ошибку 404 в react native?

Как я могу использовать изображение по умолчанию, если URL-адрес изображения выдает ошибку 404 в react native?

#javascript #reactjs #react-native #react-hooks #react-image

Вопрос:

Я хочу загрузить изображение по умолчанию, если URL-адрес изображения выдает ошибку 404. Я попробовал onError() в image prop, но это не работает.

 <Image
              onError={() => {
                setError(true);
              }}
              source={{
                uri: error
                  ? imageUrl
                  : "https://logodownload.org/wp-content/uploads/2019/07/udemy-logo-5.png",
              }}
              style={{
                height: 50,
                width: "100%",
                alignItems: "center",
                justifyContent: "center",
              }}
              resizeMode="cover"
            />

Как я могу это сделать?

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

1. reactnative.dev/документы/изображение#defaultsource

2. @Horst Это работает только для ios, а не для Android, я думаю.

3. он работает в режиме выпуска.

4. Но в документации написано, что «Статическое изображение для отображения при загрузке источника изображения». Он будет показывать изображение только во время загрузки, а что, если загрузка завершится и изображение выдаст ошибку, будет ли оно отображаться после этого, а также в случае сбоя?

5. Он будет использовать статического мага с самого начала. Пока он не получит изображение успешно.

Ответ №1:

Вы можете использовать defaultSource в своем изображении с изображением по умолчанию, что приводит к отображению изображения по умолчанию, когда предоставленный ImageUrl не загружается

 var defaultImage = yourDefaultImageURl

И в твоем Образе

     <Image
    defaultSource={defaultImage}
    source={{uri: imageUrl}}
       style={{
            height: 50,
            width: "100%",
            alignItems: "center",
            justifyContent: "center",
          }}
   resizeMode="cover"
   />

Ответ №2:

В таком случае, как насчет того, чтобы просто ввести URL-адрес по умолчанию по ошибке

  onError={() => {       
 setImageUrl('https://logodownload.org/wpcontent/uploads/2019/07/udemy-logo-5.png');
          }}

И в источнике

        source={{uri:imageUrl}}

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

1. Это установит URL-адрес изображения для всех, если одно изображение не загружается.

2. В соответствии с заданным вопросом я понимаю, что он используется для одного изображения, и тогда это работает нормально. Вы загружаете то же самое изображение в другом месте?

3. Да, для одного изображения это нормально. Но я получаю изображения с сервера.

4. В этом случае вы можете сохранить соответствующие идентификаторы и флаг для каждого изображения и соответствующим образом поддерживать состояние. Это может помочь в обновлении и загрузке изображений с извлеченными изображениями, а также с состоянием ошибки.

Метки: ,