"동적"이미지가 때로는 제로로 변경됩니다 - 나는 MaterializeCSS의 웹 사이트에서 회전 목마 작품을 만들려고 노력하고

Question

MaterializeCSS 회전 목마 : http://materializecss.com/carousel.html

내 문제는 내가 "동적"이미지를 사용하는 경우, 그것은 때로는 크기가 조정된다는 것입니다 ~ 0x0 픽셀이지만 HTML 요소 검사에서 이미지 "보통"크기를 볼 수 있습니다 (아래 이미지 # 1 참조). 어떤 캐싱 오류가 발생하거나 완전히 다른 것으로 인해 문제가 발생하는지 확신 할 수 없습니다.

주요 문제는 몇 가지 문제가 발생하는 것입니다. 페이지를 10 번 새로 고칠 수 있으며 2-3 번 새로 고쳐진 시간에서 작동하는 회전식 슬라이드 쇼가 표시되지만 다른 시간에는 아무 것도 표시되지 않습니다.

외부 소스에서 이미지를로드하는 경우 로컬 이미지가 표시되지 않는 경우에도 항상 작동합니다.

이것은 단지 "테스트"코드이므로 약간 지저분하거나 중복 된 내용이 포함될 수 있음을 알아 두십시오. 저는 방금 솔루션을 찾으려고 무수한 시간을 사용했으며 아직 하나를 발견하지 못했습니다.

(I 반응 사용하고 P.S) "정적"예를 항상 작동 위의 코드에서

render() { 

    let items = this.props.images.map((imagePath) => { 
     return (
     <a className="carousel-item"><img src={"/images/" + imagePath}/></a> 
    ) 
    }) 

    return (

     <div className="carousel"> 
     <a className="carousel-item"><img src="http://www.clker.com/cliparts/c/e/P/p/d/d/bullet-1-red-1-hi.png"/></a> 
     {items} 
     </div> 

    ) 
} 

하지만 "{항목}"부분은 때때로 표시됩니다.

오류는 HTML 코드에서 확인할 수 있습니다.

몇 번 새로 고침하면 한 번 작동합니다.

두 사진을 찍는 사이에 코드가 변경되지 않았습니다.

도움을 주시면 감사하겠습니다.

Answer 1

react이 아니고 javascript이 아니라 나도 이런 일이 일어났습니다. 이를 해결하려면 요소를 렌더링 한 후에 carousel 개체를 삭제 한 다음 다시 시작해야합니다. javascript에는 다음과 같이 표시됩니다.

$('.carousel').append('<a className="carousel-item"><img src={"/images/" + imagePath}/></a>'); 
$('.carousel').carousel('destroy'); 
$('.carousel').carousel();