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!

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

Posted by Scooter D
Scooter D
9,611 Points

Can't Get Image to Load on Bootstrap Homepage

Hey all, I am trying to get an image to load on my twitter bootstrap homepage in a RoR project.

I put the image in my images folder. I have this code in my home.html.erb 

<p>
<div class="logo">
   <img 
   src="images/ctclogo.png" alt="logo">
</div>

</p>

<hr>

I have tried multiple file paths and double checked the spelling of my ctclogo.png. All I am seeing on my homepage is a small img logo. Does anyone know what I may be doing wrong?

Thanks :)

4 Answers

Scooter D
Scooter D
9,611 Points

I just got a suggestion to use <%= image_tag 'ctclogo.png', alt: 'logo', %> It worked! Now I am trying to figure out what these %= inside html actually is/means. Does anyone know what this syntax is called?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

That's erb, it's the HTML preprocessor that ruby on rails uses. It's kinda like a templating language.

http://www.stuartellis.eu/articles/erb/

Scooter D
Scooter D
9,611 Points

Thanks James...man there are so many languages haha!

Tiffany Harrison
Tiffany Harrison
11,424 Points
Tiffany Harrison
Tiffany Harrison
11,424 Points

Sometimes it fixes the issue for me when I add a / to the beginning of images. Also, since this is a ruby project and your folders may be set up differently, you might have to work up towards your root by adding ../ before your url like so:

<img src="../images/ctclogo.png" alt="logo">
James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

That is good advice.

Scott D'Alessandro - If you want to learn more about filenames and paths, here's a great tutorial about how absolute vs relative paths work

Scooter D
Scooter D
9,611 Points
Scooter D
Scooter D
9,611 Points

Thanks for the tips and resources guys! I actually am restarting the projects, this is great info, thanks again!

Scooter D
Scooter D
9,611 Points
Scooter D
Scooter D
9,611 Points

I have been rebuilding the project throughout the day and just got to the point where I'm trying to insert images on my homepage.

I have been reading, re-reading, and re-trying a lot of different paths. I am almost positive I understand paths and am using the right one.

Is there something else that could be blocking this image to load? I was able to get a background image to load but that's in my css file, not my html homepage file.