Why are my images not working?
For many students, the Jubilee Austen project is their first exercise in building a real project. It's also your future portfolio website. (Get excited!) This makes it all the more frustrating when your images aren't showing up.
There are a number of reasons an image might not be working when you are working on a website, however the most common reasons are:
- The icon is not where you say it is.
The code below is the snippet from our lessons. It says that the icon is in a folder called "img" and that the "img" folder is located in the same folder as the index.html file you are editing.
<img src="img/icon-html.png" alt="HTML icon">
Your project folder should be set up like this:
my-site (folder)
|____ index.html
|____ css (folder)
|____ main.css
|____ normalize.css
|____ img (folder)
|____ (all of your images)Double-check that your snippet and your file structure match!
- Mismatched file names. Always triple-check your file names in both your HTML and your image folder to make sure that you are not making an error there because if there is an error with your filename nothing will work. That includes checking the capitalization and the extension. Is the file a png or a jpg?