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 trialAgung Setya Nugraha
3,674 PointsJust Started, and got problem with image I uploaded
Hi,
I followed along Nick' lesson on building simple portfolio website. Why my image cannot appear in my Chrome browser?Just icon of unseen image. I use notepad in my laptop. Thanks
15 Answers
Agung Setya Nugraha
3,674 PointsEverything else is good but the image is appeared as broken :-). I tried both absolut and relative link of the images and both failed. Thank you
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>Agung Setya Nugraha | Designer</title>
</head>
<body>
<header>
<a href="index.html">
<h1>Agung Setya Nugraha</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio<a/></li>
<li><a href="index.html">About<a/></li>
<li><a href="index.html">Contact<a/></li>
</ul>
</nav>
</header>
<section>
<ul>
<li>
<a href="img/Flying Turtle with Rocket.jpg">
<img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt="">
<p>Flying Turtle Sprite for Game</p>
</a>
</li>
<li>
<a href="img/travelpony.jpg">
<img src="img/travelpony.jpg" alt="">
<p>Strong Pony character for memorable mascot</p>
</a>
</li>
<li>
<a href="img/A tiger.jpg">
<img src="img/A tiger.jpg" alt="">
<p>Cool Tiger Mascot design for Branding</p>
</a>
</li>
</ul>
</section>
<footer>
<p>©| 2014 Agung Setya Nugraha</p>
</footer>
</body>
</html>
pavelzharnikau
3,690 PointsCan you post the part of the code containing img tag?
Anyway, "<!DOCTYPE HTML> Agung Setya Nugraha | Designer Agung Setya Nugraha Designer Portfolio About Contact Flying Turtle Sprite for Game Strong Pony character for memorable mascot Cool Tiger Mascot design for Branding ©| 2014 Agung Setya Nugraha" looks not OK.
We can try to help you, but we need all code.
Agung Setya Nugraha
3,674 PointsThank you
Tony Nguyen
24,934 Pointsalso make sure your closing anchor is like this:
</a>
for your list items.
Agung Setya Nugraha
3,674 PointsThank you
Agung Setya Nugraha
3,674 PointsHere is the code(without the opening DOCTYPE and html tags)
<head>
<meta charset="utf-8"/>
<title>Agung Setya Nugraha | Designer</title>
</head>
<body>
<header>
<a href="index.html">
<h1>Agung Setya Nugraha</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio<a/></li>
<li><a href="index.html">About<a/></li>
<li><a href="index.html">Contact<a/></li>
</ul>
</nav>
</header>
<section>
<ul>
<li>
<a href="img/Flying Turtle with Rocket.jpg">
<img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt=""/>
<p>Flying Turtle Sprite for Game</p>
</a>
</li>
<li>
<a href="img/travelpony.jpg">
<img src="img/travelpony.jpg" alt="">
<p>Strong Pony character for memorable mascot</p>
</a>
</li>
<li>
<a href="img/A tiger.jpg">
<img src="img/A tiger.jpg" alt="">
<p>Cool Tiger Mascot design for Branding</p>
</a>
</li>
</ul>
</section>
<footer>
<p>©| 2014 Agung Setya Nugraha</p>
</footer>
</body>
Agung Setya Nugraha
3,674 Points'''
<html>
<head>
<meta charset="utf-8"/>
<title>Agung Setya Nugraha | Designer</title>
</head>
<body>
<header>
<a href="index.html">
<h1>Agung Setya Nugraha</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio<a/></li>
<li><a href="index.html">About<a/></li>
<li><a href="index.html">Contact<a/></li>
</ul>
</nav>
</header>
<section>
<ul>
<li>
<a href="img/Flying Turtle with Rocket.jpg">
<img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt=""/>
<p>Flying Turtle Sprite for Game</p>
</a>
</li>
<li>
<a href="img/travelpony.jpg">
<img src="img/travelpony.jpg" alt="">
<p>Strong Pony character for memorable mascot</p>
</a>
</li>
<li>
<a href="img/A tiger.jpg">
<img src="img/A tiger.jpg" alt="">
<p>Cool Tiger Mascot design for Branding</p>
</a>
</li>
</ul>
</section>
<footer>
<p>©| 2014 Agung Setya Nugraha</p>
</footer>
</body>
</html>'''
Agung Setya Nugraha
3,674 Points` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>Agung Setya Nugraha | Designer</title>
</head>
<body>
<header>
<a href="index.html">
<h1>Agung Setya Nugraha</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio<a/></li>
<li><a href="index.html">About<a/></li>
<li><a href="index.html">Contact<a/></li>
</ul>
</nav>
</header>
<section>
<ul>
<li>
<a href="img/Flying Turtle with Rocket.jpg">
<img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt=""/>
<p>Flying Turtle Sprite for Game</p>
</a>
</li>
<li>
<a href="img/travelpony.jpg">
<img src="img/travelpony.jpg" alt="">
<p>Strong Pony character for memorable mascot</p>
</a>
</li>
<li>
<a href="img/A tiger.jpg">
<img src="img/A tiger.jpg" alt="">
<p>Cool Tiger Mascot design for Branding</p>
</a>
</li>
</ul>
</section>
<footer>
<p>©| 2014 Agung Setya Nugraha</p>
</footer>
</body>
</html> `
Agung Setya Nugraha
3,674 Points<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>Agung Setya Nugraha | Designer</title>
</head>
<body>
<header>
<a href="index.html">
<h1>Agung Setya Nugraha</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio<a/></li>
<li><a href="index.html">About<a/></li>
<li><a href="index.html">Contact<a/></li>
</ul>
</nav>
</header>
<section>
<ul>
<li>
<a href="img/Flying Turtle with Rocket.jpg">
<img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt=""/>
<p>Flying Turtle Sprite for Game</p>
</a>
</li>
<li>
<a href="img/travelpony.jpg">
<img src="img/travelpony.jpg" alt="">
<p>Strong Pony character for memorable mascot</p>
</a>
</li>
<li>
<a href="img/A tiger.jpg">
<img src="img/A tiger.jpg" alt="">
<p>Cool Tiger Mascot design for Branding</p>
</a>
</li>
</ul>
</section>
<footer>
<p>©| 2014 Agung Setya Nugraha</p>
</footer>
</body>
</html>
Agung Setya Nugraha
3,674 Points......finally I can show the code. This is what happened when an illustrator learns coding for the first time. I am so sorry :-).
pavelzharnikau
3,690 PointsRight syntax for images:
<img src="URL" alt="alternative text">
Agung Setya Nugraha
3,674 PointsI did it.
Is this not right?
<img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt=""/>
pavelzharnikau
3,690 PointsYou don't need to close it with /.
<img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt="">
George Cristian Manea
30,787 PointsYour src value is not a link for an image is for an html page
Agung Setya Nugraha
3,674 PointsOkay thanks. I just erase the " / " but still not functioning. Why?
George Cristian Manea
30,787 PointsAlso it is not a good practice to have spaces in your image name like "a tiger.jpg";
pavelzharnikau
3,690 PointsDo you need anchors?
<li>
<img src="URL or path to your image" alt="">
<p>Flying Turtle Sprite for Game</p>
</li>
Agung Setya Nugraha
3,674 PointsThank you very much I finally found what went wrong. In Nick's lesson he created folder for image and named it img. Mine is named image. :-)
George Cristian Manea
30,787 PointsGeorge Cristian Manea
30,787 PointsYou should post your code so we can undestand better