CODEWITHSUNDEEP
javascriptreactjsmaterialize
ExoMemphiz
ExoMemphiz

Reputation: 179

"Dynamic" image sometimes resizes to zero - MaterializeCSS Carousel

I am trying to make a Carousel work from the MaterializeCSS website: http://materializecss.com/carousel.html

My problem is that when I use a "dynamic" image, it will sometimes be resized to 0x0 pixels, although it can see the images "normal" size in the HTML elements inspect - see image #1 below. I'm unsure if the problem is caused by some caching error that may occur, or something completely different

The main issue is that it SOMETIMES works. I can refresh the page 10 times, and 2-3 out of the refreshed times it will show the working carousel, but the other times it will show nothing.

If I load an image from an outside source, that will ALWAYS work, even when the local images do not show up.

Please be aware this is just "test" code, so it might be a little messy or have redundant things included, I have just used countless hours trying to find a solution, and have yet to stumble upon one.

(P.S I am using 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>

   )
}

From the above code, the "static" example will always work, but the "{items}" part will only sometimes show up.

The error can be seen here in the HTML code. Zero Picture Size

After refreshing a couple times it will work once. Working Example

No code changed between the taking of the two pictures.

Any help would be highly appreciated.

Upvotes: 0

Views: 522

Answers (1)

Leo
Leo

Reputation: 11

This happened to me too, not in react but in javascript. To solve it you just have to destroy the carousel object after the render of the elements and then start it again. In javascript, it would be something like this:

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

Upvotes: 1

Related Questions