React native: неверный источник изображения, когда источником является форматированная строка, полученная из Firestore

Я сохранил следующий источник изображения вместе с uri в firebase в виде строки

coverImage " uri: "https://images.unsplash.com/photo-1570102881689-c04ab4cf1f4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDF8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=60"

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

Warning: Failed prop type: Invalid prop `source` supplied to `Image`, expected one of type [number].

Ниже приведена опора изображения.

<Image style = {{ width: 250, height: 250 }} source = {`{${item.image}}`} />

У меня есть consoled.log элемент.изображение, и ссылка работает нормально, когда я ctrl+щелчок на ней. Любые отзывы о том, что я делаю неправильно.


В console.info я получаю следующий результат

Array [
  Object {
    "id": "al1tT6JfNYssimYZ8Lhy",
    "image": " uri: \"https://images.unsplash.com/photo-1570102881689-c04ab4cf1f4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDF8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=60\"",
    "title": "Lorem ipsum",
  },
]

и console.info представляет собой item.image, когда я визуализирую его через плоский список, и это результат.

uri: "https://images.unsplash.com/photo-1570102881689-c04ab4cf1f4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDF8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=60"
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
28
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы уже пробовали это? <Image source = {{ uri: item.image }} />

Да, но выход остается прежним

BhavyaSharma95 20.03.2022 13:51

Что вы получаете, когда используете console.info(item.image)?

Rayan Wilbert 20.03.2022 13:54

Я только что немного обновил вопрос, пожалуйста, дайте мне знать, если потребуется дополнительная информация.

BhavyaSharma95 20.03.2022 14:15

эй, Райан, твой ответ был правильным, у меня возникла проблема с форматированием данных.

BhavyaSharma95 20.03.2022 14:29

Попробуйте установить URI, как показано ниже:

<Image style = {{ width: 250, height: 250 }} source = {{ uri: item.image }} />

Также кажется, что поле image в объекте имеет префикс uri:, попробуйте установить URL, начинающийся с https://.

При этом ошибки нет, но изображение тоже не видно

BhavyaSharma95 20.03.2022 14:08

Можете ли вы дать больше контекста для «невидимого»? Также попробуйте перезапустить сервер разработки. item.image является действительным URL, верно?

Dharmaraj 20.03.2022 14:08

Я только что немного обновил вопрос, пожалуйста, дайте мне знать, если потребуется дополнительная информация.

BhavyaSharma95 20.03.2022 14:14

Является ли `uri:` частью поля image в Firestore? Вы можете просто сохранить URL-адрес изображения, начинающийся с https://?

Dharmaraj 20.03.2022 14:21

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

BhavyaSharma95 20.03.2022 14:24

Другие вопросы по теме