이미지 없음의 기본 소스는 무엇입니까?

Question

이미지 원본에 유효한 URI가 표시되지만 미디어 파일에서 이미지를 삭제하면 없음 파일이 반환됩니다.

나는 보통 이미지에 대한 잘못된 URI를 확인하지만 이번에는 서버의 이미지 디렉토리가 이미지를 렌더링 할 수 없습니다.

if(!_.isNil(item.img)) { // This checks if uri is null or string 

나는 defaultSource를 시도했지만 작동하지 않는다. 영원히

<Image 
     fadeDuration={0} 
     key={item.id} 
     source={{uri: item.img}} 
     style={styles.rowImage} 
     resizeMode="cover" 
     defaultSource={require('../../assets/images/styles.png')} 
     /> 

우리가 어떻게 이전의 유효한에서 URI가 존재하지 않는 Image 경우 기본 이미지를 배치 할 수 있습니다 흰색 화면을 보여줍니다? 당신의 URI가 존재하지 않는 경우

감사

Answer 1

당신은 처리 할 수 ​​onError를 사용할 수 있습니다. 그런 다음 setNativeProps을 사용하여 이미지를 원하는 이미지로 바꿉니다.

import resolveAssetSource from 'resolveAssetSource'; 

... 

handleErr(item){ 

    var imgsrc = require('imagePathHere'); 

    this.refs[`testimage-${item}`].setNativeProps({ 
     src: [resolveAssetSource(imgsrc)] //use source for ios instead of src 
    }); 

} 

... 

<Image 
     //ref="testimage" 
     ref={`testimage-${item.id}`} 
     fadeDuration={0} 
     key={item.id} 
     source={{uri: item.img}} 
     style={styles.rowImage} 
     resizeMode="cover" 
     defaultSource={require('../../assets/images/styles.png')} 
     onError={() => this.handleErr(item.id)} 
     /> 

을 또는 URL에서 사용 :

예

로컬 경로를 사용

handleErr(item){ 

    var imgsrc = 'http://blahblah.com/tes.jpg'; 

    this.refs[`testimage-${item}`].setNativeProps({ 
     src: [{uri: imgsrc}] //use source for ios instead of src 
    }); 

} 

... 

<Image 
     //ref="testimage" 
     ref={`testimage-${item.id}`} 
     fadeDuration={0} 
     key={item.id} 
     source={{uri: item.img}} 
     style={styles.rowImage} 
     resizeMode="cover" 
     defaultSource={require('../../assets/images/styles.png')} 
     onError={() => this.handleErr(item.id)} 
     />