React JS에서 깨진 이미지를 확인하는 방법

Question

json에서 기사 데이터를 가져와 기사의 텍스트 인 영웅 모듈에 큰 이미지를 표시하는 모듈을 작성하고 있습니다.

데이터가있어 이미지가있는 경우 해당 이미지가 표시되고 데이터에 이미지가없는 경우 기본 이미지가 표시됩니다. 이 메서드는 끊어진 링크를 바꾸지 않고 기본 이미지를 표시합니다.

저는 아직 반응이없고 새로운 상태를 사용하고 있습니다 ... 질문은 상태를 사용하여 깨진 링크를 확인해야하며 어떻게해야합니까?

내가 데이터를 얻을 방법이있는 모듈의 소품과 같습니다

const { newsItemData: { 
      headline = '', 
      bylines = [], 
      publishedDate: publishDate = '', 
      updatedDate: updatedDate = '', 
      link: newsLink = '', 
      contentClassification: category = '', 
      abstract: previewText = '', 
      abstractimage: { filename: newsImage = '' } = {}, 
      surfaceable: { feature: { type: featureType = '' } = {} } = {}, 
     } = {}, 
     wideView, 
     showPill, 
     defaultImage } = this.props; 

내가 이런 식으로 정보를 표시합니다

<div className={imageContainerClassName} style={customBackgroundStyles}> 
     {newsImage ? <img className="img-responsive" src={newsImage} alt={headline}/> : <img className="img-responsive" src={defaultImage} alt={headline}/>} 
</div> 

을 또한 확인하기 위해 무엇을해야 깨진 이미지? 이것이 필요한 모든 관련 데이터라고 생각합니다. 다른 것을 보여줘야하는지 알려주세요. 감사합니다.

Answer 1

이미지를로드 할 수없는 경우 작업을 수행 할 수있는 onerror이라는 이미지에 대한 기본 이벤트가 있습니다.

<img onError={this.addDefaultSrc} className="img-responsive" src={newsImage} alt={headline}/> 

//in your component 
addDefaultSrc(ev){ 
    ev.target.src = 'some default image url' 
} 

Answer 2

내 이해에 따르면 깨진 이미지를보고 싶습니다. onError 속성에서 메소드를 호출해야합니다. 이것을 확인하십시오 jQuery/JavaScript to replace broken images

Answer 3

앞서 언급했듯이 onError이 최선의 방법입니다. 당신은 당신을 위해 이것을 처리하는 구성 요소를 찾고 있다면

, https://github.com/socialtables/react-image-fallback