Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Rick Kieffer
Rick Kieffer
490 Points
Posted by Rick Kieffer
Rick Kieffer
490 Points

React + Bootstrap Carousel: Images not loading

HI,

I copied the Bootstrap Carousel from the docs into my project as follows:

const Carousel = (props)=>{
  return(
  <div>
    <div id="carouselExampleControls" className="carousel slide" data-ride="carousel">
      <div className="carousel-inner">
        <div className="carousel-item active">
          <img className="d-block w-100" src="../images/JumbotronFiller.jpg" alt="First slide"/>
        </div>
        <div className="carousel-item">
          <img className="d-block w-100" src="..." alt="Second slide"/>
        </div>
        <div className="carousel-item">
          <img className="d-block w-100" src="..." alt="Third slide"/>
        </div>
      </div>
      <a className="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span className="carousel-control-prev-icon" aria-hidden="true"></span>
        <span className="sr-only">Previous</span>
      </a>
      <a className="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span className="carousel-control-next-icon" aria-hidden="true"></span>
        <span className="sr-only">Next</span>
      </a>
    </div>
  </div>
    )
}

The website loads, no error messages in the console, the animations work, however the image doesn't show up and I get the "broken image" icon. Any ideas what is wrong here?

Thanks!

Nijesh Nj
Nijesh Nj
18,232 Points

Maybe due to an incorrect file path.

2 Answers

Michael Morrison
Michael Morrison
30 Points
Michael Morrison
Michael Morrison
30 Points

Had the same problem. Found a good answer on stack overflow here Had to include the require call inside the img tag as follows: <img src={require('/images/image-name.png')} /> Hope this helps

V School Learning
V School Learning
25,025 Points
V School Learning
V School Learning
25,025 Points

I resolved my issue partially by adding the require as suggested above though I am using multiple images and some are duplicating for whatever reason.