“动态”图像有时会调整为零 - MaterialiseCSS Carousel

Question

我正在尝试使用MaterialiseCSS网站制作Carousel：http://materializecss.com/carousel.html

我的问题是，当我使用“动态”图像时，有时会将其大小调整为0x0像素，尽管它可以在HTML元素检查中看到图像“正常”大小 - 请参阅下面的图像＃1。 我不确定问题是由某些可能发生的缓存错误引起的，还是完全不同的

主要问题是SOMETIMES有效。我可以刷新页面10次，刷新次数2-3次会显示工作轮播，但其他时候则不会显示任何内容。

如果我从外部来源加载图像，即使本地图像没有显示，也始终可以正常工作。

请注意这只是“测试”代码，所以它可能有点凌乱或包含多余的东西，我只是花了无数个小时试图找到解决方案，并且还没有偶然发现一个。

（P.S我正在使用React）

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>

   )
}

从上面的代码中，“静态”示例将始终有效，但“{items}”部分有时只会显示。

错误可以在HTML代码中看到。

刷新几次后，它会工作一次。

拍摄两张照片之间没有任何代码改变。

任何帮助都将受到高度赞赏。

Answer 1

这也发生在我身上，不是react而是javascript。要解决它，您只需在渲染元素后销毁carousel对象，然后再次启动它。在javascript中，它会是这样的：

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