>source

한 화면에서 이미지를 찍고 firebase에 업로드하고 있지만 이미지를 표시하기 위해 이미지를 다운로드하려고 할 때 다른 페이지에서 오류가 발생하지만 오류가 무작위로 발생합니다. URL을 복사하여 붙여 넣으면 image src 효과가있다.

또한 이미지에서 로그 세부 정보를 콘솔 할 수 있지만 어떤 이유로 이미지를 표시하는 동안 오류가 발생합니다.

export default function DisplayPage() {
    const imageRef = firebase.storage().ref().child('images');
    const sampleImage = imageRef.getDownloadURL();
return (
     <View>
        <Image source={{ uri: sampleImage }} style={{ width: 350, height: 350 }} />
     </View>
  );
}

다른 페이지에서 파일을 업로딩하고 있습니다.

const ref = firebase
        .storage()
        .ref()
        .child('images')
    }

내가있는 파일의 모든 이미지를 표시하는 페이지를 만들고 싶지만 하나의 이미지도 표시 할 수 없습니다.

내가 여기서 뭘 잘못하고 있니?

편집하다: 내가 얻은 코드 오류는 엑스포 내의 임의의 파일을 참조하고 앱이 부팅되지 않도록 방지합니다 (따라서 게시하지 않은 이유). 아래 응답은 실제로 내 질문에 대한 답변입니다. 내가 궁금한 것은하나의 이미지 대신 전체 폴더를 어떻게 표시할까요?그 안에 들어 갈까요 child() ? 나는 그것을 둘 다 시도했다 child()ref() 둘 다 실패했습니다.

모든 도움에 감사드립니다!

  • 답변 # 1

    이 방법으로 시도

    export default function DisplayPage() {
        const [sampleImage, setSampleImage] = useState(); // set state here
        const getSampleImage = async () => {
           const imageRef = firebase.storage().ref().child('images');
           const url = await imageRef.getDownloadURL().catch((error) => { throw error });
           setSampleImage(url);
        }
       // Similar to componentDidMount and componentDidUpdate:
       useEffect(() => {
        getSampleImage();
       });
       return (
         <View>
            {sampleImage ? <Image source={{ uri: sampleImage }} style={{ width: 350, height: 350 }} /> : null }
         </View>
       );
    }
    
    

  • 이전 javascript - react JS를 사용하여 5 분 카운트 다운 간격 타이머를 1 분으로 오프셋하는 방법
  • 다음 image - &Vec RGB 데이터를 ImageBuffer Rust로 변환