Full Stack Engineer Beginner

Get Help
#1

Good day!

I am just starting the full-stack program with Codecademy. I am already stuck with the exercises on MDA.

Below is the link to the exercise I am having trouble with.

MDA - Dealing with Files

MDA - Test Server Through Python

Software/Hardware: OS MAC Big Sur 11.31, Visual Studio Code,
Python- Chrome: localhost:7800/My%20test%20page/

Problem: My image is not displaying when the index file is referenced in my browser.

Info: I have created the Local testing site through python on my terminal and it appears to be working properly. My code seems fine. I have tried multiple images and multiple directory renames.

Code:

<html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <img src="images/image1.jpg" alt="My test image"> </body> </html>

File directory:

Screen Shot 2021-11-12 at 11.28.46 AM
Screen Shot 2021-11-12 at 11.28.46 AM1065×457 30.3 KB

This should be simple. I could just move on but I want to get this right this time and not have any holes.

Any help is greatly appreciated! Thank you in advance

#2

The error I am getting is a simple 404 URL (image) Not found.

Page display and Error:

Screen Shot 2021-11-12 at 12.06.31 PM
Screen Shot 2021-11-12 at 12.06.31 PM1577×695 85 KB

#3

Hi,
from your screenshot it looks like your index.html is located in the root folder ‘MY TEST PAGE’, right? Then you relative path is correct, bu I would try to prefix it with ‘./’ to indicate that it is a relative path:

'./images/image1.jpg'
#4

Hi mirja_t. Thank you for your response!

That reacted to the Visual Studio environment by auto-populating the link. So, it definitely had an effect but when I load the index file through the Local Testing site or just though dropping the link it still is not displaying the image.

In the editor when I Ctrl-click the text link it loads the correct image.

#5

Hmm, I don’t know that set up with Python. I use node for setting up a localhost – but just when I work with Javascript. For just HTML and CSS that is not necessary, because you can test your file by just pulling the html file into your browser window. But that doesn’t display the image either despite adding the ‘./’ prefix to the file path of the image?
Maybe for the setup of your localhost the spaces in your root directory are causing trouble – but that’s just a guess. Maybe worth a try to just rename your root directory from ‘MY TEST PAGE’, to ‘mytestpage’.

#6

Wow, as I said, it was so simple. The problem was in line 7 = <img src="./images/image3.gif" alt=“My Test Image”>

I copied the code as-is and I assumed the line after “alt=” was just a name for the code to back pocket. Once I change the text to match the file name of the image it displayed correctly.

Correct code: img src="./images/image3.gif" alt=“image3.gif”

Thank you for your help on this one mirja_t

#7

Once diving into the next exercises it appears I was right. The alt= is an alternate description for the image.

Do you have any insight as to why this had the reaction it did to displaying my image? Based on what I have read it seems this element of HTML could be staged as anything and it should still display my image

Thanks again for all your help!

#8

I don’t. You are right: The alt tag is supposed to be displayed if the image isn’t loaded. Which text will be shown is your choice. Since it is also read out by screen readers, it doesn’t (and shouldn’t) be the file name but it should be as descriptive as possible.

#9

I’ve replaced the code, subsequently, with different text. It is working properly now.

I wish I could see what was missed here for learning purposes. But, it’s working.

Again, thank you!

1 Like