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>
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:
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.
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â.
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.
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
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.
