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

CSS Bootstrap 4 Basics (Retired) Using Bootstrap Components Displaying Content with Cards

Posted by Victor Novikov
Victor Novikov
6,322 Points

images won't load

I am tying to add images to cards using 

<img class="card-img-top" scr="img/geo.png" alt="card img">

but somehow it does not work (I only see the text I provide as alt value). Is there something wrong with the way images are stored? I had no issues with pdx.jpg

the full 'speakers' block is below

      <!--   Speakers   -->
      <h1 id="speakers" class="display-4 text-center my-5 text-muted">Speakers</h1>
      <div class="row">
        <div class="col-md-6">
          <img class="card-img-top" scr="img/nodestradamus.png" alt="card img">
          <h4 class="card-title">NodeStradamus</h4>
          <p class="card-text">"NodeStra" is a software engineer and philosopher trying to leave the world better than he found it. He codes for non-profits, eCommerce, and large-scale web apps.</p>
        </div>

        <div class="col-md-6">
          <img class="card-img-top" scr="img/geo.png" alt="card img">
          <h4 class="card-title">Geo "Lo" Cation</h4>
          <p class="card-text">Geo is a JavaScript developer working on large-scale applications. He's also a teacher who strives to support students in removing all barriers to learning code.</p>
        </div>

        <div class="col-md-6">
          <img class="card-img-top" scr="img/ecma.png" alt="card img">
          <h4 class="card-title">Ecma Scriptnstuff</h4>
          <p class="card-text">Ecma found her passion for computers and programming over 15 years ago. She is excited to introduce people to the wonderful world of JavaScript.</p>

        </div>

        <div class="col-md-6">
          <img class="card-img-top" scr="img/jay.png" alt="card img">
          <h4 class="card-title">Jay Query</h4>
          <p class="card-text">Jay is a developer, author of CSS: The Missing Manual, JavaScript &amp; jQuery: The Missing Manual, and web development teacher.</p>
        </div>

        <div class="col-md-6">
          <img class="card-img-top" scr="img/json.png" alt="card img">
          <h4 class="card-title">Json Babel</h4>
          <p class="card-text">All of his professional life, Json has worked with computers online; he is a polyglot programmer and likes using the right tools for the job.</p> 
        </div>

        <div class="col-md-6">
        </div>
      </div>      <!--   /Speakers   -->

Thanks!

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! The problem is simply a series of typos. In every instance where you have an image you've typed scr instead of src. Remember that src is short for "source".

Hope this helps! :sparkles:

Victor Novikov
Victor Novikov
6,322 Points

HA Apparently I need to work on my proofreading skills. Thank you