Реагировать на собственные элементы изображения компонента не отображать изображение при использовании переменной

Я использую библиотеку react-native-elements для разработки своего приложения, и я хочу создать страницу сведений о своем продукте, все данные, которые я передал, с реквизитами, сбываются, но когда я хочу установить URI изображения, компонент изображения ничего не показывает, кроме как когда я помещаю URL-адрес как строка вручную показывает изображение

URL изображения: https://boho-box.com/storage/upload/product/IMG_1696_1609848185.jpg

Файл Item.js:

import * as React from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
import { Card, Button, Image } from 'react-native-elements';
import { useNavigation } from '@react-navigation/native';

function Item(props){

 const navigation = useNavigation();

 return(
   <View>
      <Image
         style={styles.image}
         source={{ uri: props.pDetail.img }}
         PlaceholderContent={<ActivityIndicator />}
       />
      <Text>{props.pDetail.title}</Text>
      <Text>Price: ${props.pDetail.price}</Text>
      <Text>{props.pDetail.img}</Text>
   </View>
 );
}

const styles = StyleSheet.create({
  row: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
  },
  col: {
      flex: 1,
  },
  image: {
    width: 200,
    height: 200,
  }
});

export default Item;

скриншот страницы при использовании source={{ uri: props.pDetail.img }} :

введите здесь описание изображения

скриншот страницы при использовании source={{ uri: 'https://boho-box.com/storage/upload/product/IMG_1696_1609848185.jpg' }} :

введите здесь описание изображения

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

Деталь.js:

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import Item from './components/Item';


function DetailsScreen({ route, navigation }) {

  const { name, price, img } = route.params;

  const detail = {
    title: JSON.stringify(name),
    price: JSON.stringify(price),
    img:   JSON.stringify(img),
  }

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Item pDetail={detail} />
    </View>
  );
}

export default DetailsScreen;

person Amir Hossein    schedule 25.04.2021    source источник
comment
Можете ли вы показать, как вы назвали компонент элемента в его родительском элементе?   -  person Hassan Kandil    schedule 25.04.2021
comment
Я импортирую import Item from './components/Item'; и <Item pDetail={detail} />   -  person Amir Hossein    schedule 25.04.2021
comment
как насчет подробного объекта?   -  person Hassan Kandil    schedule 25.04.2021
comment
const { name, price, img } = route.params; const detail = { title: JSON.stringify(name), price: JSON.stringify(price), img: JSON.stringify(img), } они приходят с реактивной навигацией   -  person Amir Hossein    schedule 25.04.2021
comment
в компоненте Item вы пытались использовать console.log(props.pDetail)? если да то каков результат?   -  person Hassan Kandil    schedule 25.04.2021
comment
да, я знаю, он возвращает вот так /product/IMG_1696_1609848185.jpg `   -  person Amir Hossein    schedule 25.04.2021
comment
Давайте продолжим обсуждение в чате.   -  person Hassan Kandil    schedule 25.04.2021


Ответы (1)


измените деталь const в файле Detail.js на:

JSON.stringify помещает путь изображения между

const detail = {
    title: JSON.stringify(name),
    price: JSON.stringify(price),
    img:   img,
  }
person Amir Hossein    schedule 25.04.2021