javascript - "Dynamic"图像有时会调整为零 - MaterializeCSS Carousel

Question

我正在尝试从 MaterializeCSS 网站制作轮播:http://materializecss.com/carousel.html

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

主要问题是它有时会起作用。我可以刷新页面 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();