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 trialDerek Dawes
4,944 Pointsarrow.svg is not showing on the website giving a broken link icon and showing the alt="down arrow"
Using workspace on this lesson and the arrow.svg file is present in the img folder. However I am showing a broken link icon "hence the alt="down arrow" is displaying" so I cant perform the lesson of re-sizing the arrow. Is this an treehouse issue? I am using google chrome and the rest of the website appears just fine.
Not sure if this is how I share a snapshot https://w.trhou.se/mbbk7c4ahs
3 Answers
Marcus Parsons
15,719 PointsHey Derek,
This one was a little bit of a doozy, but I found a solution that makes all modern browsers happy, as far as I can tell. First, I can tell Guil is using Chrome in this video, but it must have been several versions ago. Chrome does not like linking to the svg file for whatever reason. Firefox is more than happy to do so. But that presents us with a problem, of course: browser compatibility.
The solution was to make the img into an object, and encapsulate the object inside a div that controls everything stylistically about the svg. It was pretty easy to do so:
<!-- Replace <img src="img/arrow.svg" alt="Down Arrow" /> with the following-->
<div class="arrow"><object data="img/arrow.svg" type="image/svg+xml"></object></div>
And then since we're going to add a class of "arrow" anyways to the img element, we add the following into the CSS:
.arrow {
/* You already do this in the video */
width: 50px;
/* Centers the image */
margin: 0 auto;
/* And add whatever other code you want or need to */
}
This made Chrome and Firefox happy! I can't test with IE or Safari because I run Linux, but I'm 99% sure they will be happy as well!
Richard Nicholls
1,301 PointsThanks for helping
Marcus Parsons
15,719 PointsYou're welcome!
Jovan Dandridge
12,835 PointsThanks for the help Marcus, im curious tho how you were able to find the answer?
Marcus Parsons
15,719 PointsYou're welcome! Doing some research, I found an article where someone mentioned that you could use an <object> element to display svg files. And the <object> tag is supported in all modern browsers.
Zecare Thomas
430 PointsZecare Thomas
430 PointsMy goodness thank you for this x.