Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Kyle Brisson
Kyle Brisson
502 Points

Imported Img.

Hey Team,

Just wondering why my imported img's are not displaying when previewing my workspace. If I click on the img in my file tree they appear but when previewing my workspace they are all broken img's ?

10 Answers

Rich Donnellan
Rich Donnellan
25,780 Points

It's possible your image src isn't pointing to the correct path. No way for us to really know without seeing your folder structure and code.

Kyle Brisson
Kyle Brisson
502 Points
<li>
              <a href="img/Rideing 03.jpg">
                <img src="img/Rideing 03.jpg" alt"">
                <p>Crazy trail down hill.</p>
              </a>
            </li>

            <li>
              <a href="img/Rideing 01.jpg">
                <img src="img/Rideing 01.jpg" alt"">
                <p>Great day for a ride.</p>
              </a>
            </li>

            <li>
              <a href="img/Rideing 02.jpg">
                <img src="img/Rideing 02.jpg" alt"">
                <p>Amazing view from above.</p>
              </a>
            </li>

            <li>
              <a href="img/Rideing 04.jpg">
                <img src="img/Rideing 04.jpg" alt"">
                <p>Back road trail.</p>
              </a>
            </li>

             <li>
              <a href="img/Rideing 05.jpg">
                <img src="img/numbers-12.jpg" alt"">
                <p>Amazing sunset.</p>
              </a>
            </li>
        </ul>
Rich Donnellan
Rich Donnellan
25,780 Points

A few things:

  1. You're missing the opening <ul> tag.
  2. Check your image file names; spelling/spaces matter *(e.g. Rideing vs. Riding). It's actually best to use underscores between words — Riding_01.jpg.
  3. The last <img> isn't referencing Rideing 05.jpg.
  4. Still no idea what your file/folder structure looks like. Are all the images in an img folder?
Kyle Brisson
Kyle Brisson
502 Points

I have no way of copy and pasting my file/folder structure in here, I have tried editing my code and changing the img names to eg: Ride_01.jpg but they are still not showing up. I do have all of my Img's in a folder called IMG. Here is a snapshot of my workspace. https://w.trhou.se/pvhvnkhoxi

Kyle Brisson
Kyle Brisson
502 Points

I just noticed the error on rideing_01.jpg and rideing_06.jpg. I have corrected these as well. None of my img are loading including the facebook/twitter logo's.

Rich Donnellan
Rich Donnellan
25,780 Points

You'd have to manually type out your file/folder structure.

If your folder is Img, then you must use:

<img src="Img/Ride_01.jpg" alt"">

Case counts also.

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

I took the liberty of forking your workspace and taking a look. And Rich Donnellan is correct. It's the capitalization of your image folder that's causing the issue. You have it as "Img" instead of "img". You need to change that capitalized I into a lower case "i". The easiest way to do this is to right click the folder and choose rename. Then set the name of the folder to "img". Don't forget to refresh your page afterwards! :smiley:

Kyle Brisson
Kyle Brisson
502 Points

Ohh wow...I'm sorry guys. Thank you so much :) changed my file to match and all is right in the world.

Rich Donnellan
Rich Donnellan
25,780 Points

Excellent! Glad to help.

Now help the Community and close out this question! :)

Kyle Brisson
Kyle Brisson
502 Points

LOL How do I close out the question??

Kyle Brisson
Kyle Brisson
502 Points

Ok cool thanks Team :)