Why image would not reflect in the browser?

HTML-CSS
1

I have updated the new picture- smaller size (“images/Myphoto_cropped_circle.png”) - since then it would not reflect in the browser. Please advise me.
Also have tried adding cell spacing… et.c - still no changes.

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<title>🌐Masha's Personal Site </title>

</head>

<body>

<table>

<tr>

<td><img src= "images/Myphoto_cropped_circle.png" alt="Masha Bond profile picture"></td>

<td><h3>Masha's Web Project</h3></td>

<td><h4>Jr.Web Developer</h4></td>

</tr>

</table>

<p><br>My name is Masha

I have been enjoying the opportunity to study Web Development.</p>

<br> Meantime I go through Angela Yu's Boot Camp at Udemy.

Also in the past, I have done projects at FCC, which was wonderful as well.

<p> I am focused to grow and expand my skills as well as the network.

I do have a source of domains available to buy. Variety of

categories available: Real estate, Law sphere... et.c

(database for those domains

will be available later this year).

<br>Anyway, I am happy to connect

with colleagues! </h3></p>

<h3> Education </h3>

<ul>

<li>Freecode Camp </li>

<li>Code Academy</li>

<li>Udemy Boot Camp </li>

</ul>

<ul>

<h3>My Projects </h3>

<ul>

<li> The Tribute Page at Free Code Camp</li>

<li> The Watch Survey Form at Free Code Camp</li>

<li>The Fashion Blog at Code Academy </li>

</ul>

<h3>Work Experince </h3>

<table border="1">

<thead>

<tr>

<th>Dates</th>

<th> Work </th> <!-- These special <th> table headers tags.

Every browser recognizes -->

</tr>

</thead>

<tbody>

</tbody>

<tfoot>

</tfoot>

<tr>

<td>06.2015-08.2020</td>

<td>Client Dashboard Specialist</td>

</tr>

<tr>

<td> 10.2020-02.2021</td>

<td> Software Quality Specialist </td>

</tr>

<tr>

<td>2021 </td>

<td>Free Code Camp - Project </td>

</tr>

<tr>

<td>2021 </td>

<td>Login Form</td>

</tr>

</table>

<hr>

<a href="hobbies.html">My Hobbies</a>

<a href="contact-me.html">Contact Details</a>

</body>

</html> '''
2

Try using ./

<img src= "./images/Myphoto_cropped_circle.png" alt="Masha Bond profile picture">

However, without knowing your folder/file structure it’s very hard to help with this.

1 Like
4

Please look at my path ( added image in the folder )

Issue_Image
Issue_Image1920×1080 221 KB

5

Maybe is it because I haven’t added div element ( due to curriculum- different course material , it has never been mentioned there)

6

Did you try ./ as I said?

It also depends on how you are opening the html file. A root-relative path / like you have now will not work if you are just opening the file in the browser. You would have to serve the file using a local web server (like Live Server).

1 Like
7

Your folder is named Images and you’re using images in the link. Also in the img link you should add a dot before the first forward slash or remove the first forward slash.

2 Likes
8

As others have said, you want the ./ to indicate that you are using a relative path. @exari
is also correct that capitalization matters.

1 Like
9

Didn’t notice the folder name, good catch.

I haven’t used Atom in a long time but I assume it has some path completion built-in just like VS Code does. I would highly recommend using path completion. You should just always start the path with ./ (or ../ if going up first). The editor should then start to do a path completion by giving you a drop-down of all the files and folders. You can then complete the path by just following the links it gives you.

1 Like
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.