Hello guys, I tried to add an image while learning Html offline without any success, I’ve tried every advice online. Put the image in the same folder with the index file, checked the code word for word to make sure I didn’t type src as scr, tried on different browsers explorer, chronium and Microsoft edge but the result is the same x and the alternate message. Please help, is there something i’m missing cause this seems like a stumbling block for me and it’s annoying. Thanks.
Instead of a screensnap it would be better if you pasted your html directly into the comments. Start with three back ticks, then paste your html, then follow with three backticks.
1 Like
///
Black Goose BistroBlack Goose Bistro
The Restaurant
The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.
Catering
You have fun. We'll handle the cooking. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.
Location and Hours
Seekonk, Massachusetts;
Monday through Thursday 11am to 9pm;
Friday and Saturday, 11am to midnight
Hi! You are open your html file wrong.
You are missing the <html> opening tag.
Try replacing the first lines by this:
<!DOCTYPE html>
<html lang="en">
<head>
Good luck!
Edit: Also you misstyped a </p> tag, check the line after " local ingredients.".
1 Like
Thanks, I have done all that but no changes so far.
So those weren’t backticks above, those were forward slashes. Backticks look like single quotes but they are slanting backwards. On my keyboard they are in the upper left corner next to the number 1. Please edit your post above and change the forward slashes to backticks. When you get it right your html should be formatted like:
<html>
<p>...</p>
</html>
2 Likes
Well, go to: pastebin.com and paste the FULL content of your notepad file in the “New Paste” field. After this, click on the “Create new Paste”. You wil be redirected a new page. Copy the new Url and share here.
Good Luck!
Edit: may you take a snapshot of the folder on you are working it?
1 Like
cant use links yet according to rules
<html>
<head>
<meta charset="utf-8">
<title> Black Goose Bistro </title>
</head>
<body> <img src="blackgoose.png" alt="logo">
<h1> Black Goose Bistro </h1>
<h2> The Restaurant </h2>
<p> The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.</p>
<h2>Catering </h2>
<p>You have fun.<em> We'll handle the cooking.</em> Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.</p>
<h2>Location and Hours </h2>
<p> Seekonk, Massachusetts;<br> Monday through Thursday 11am to 9pm;<br> Friday and Saturday, 11am to midnight </p>
</body>
</html>
The image tag was actually nested in the h1 tag, I put it ahead to see maybe that’s the problem but it wasn’t and still got the same result.
Okay, i copy your code, search a goose .png and test it…
And works.
Since all our systems are different, i will doubt about yours.
I Google it, and, maybe, you have a problem with Microsoft Edge extensions. Try to disable the extensions for a while, if you have AdBlock disable it.
And try again.
Good luck!
PS: Just for make sure, try to download another browser, or test the code online with an online img, like in CodePen. You will get sure that isn’t your code.
PS2: Sorry for the bad english.
1 Like
tried all of this, still the same issue. it won’t even load online images. though when I was learning on freecodecamp website I didn’t experience this issue. maybe it is my laptop I don’t know and it is new. whew! : (
okay, I will try a new browser i haven’t done that.
tried chrome, explorer and edge. same issue.
1 Like
You should use a html file editor like vs code.
try downloading Brave browser and also try to download an IDE, probably VS Code for a better coding environment.
done all that, no changes.
[following I used FF, but any browser has these tools]
Find the img element in the browser and inspect it: can you select the image (normally you can click/hover over it in the inspector)
Open the developer tools and see if there is an error in the console.
Change the src to be an online image. In the developer tools, select the network tab, and reload. It should show the result of the browser downloading the image, what is it?
1 Like
I’m on Linux so i really don’t know how Win10 works. Maybe a permission problem? The code looks good, and already tested. With a local image must work easily. Try with other image in other format, like .jpg.
Thanks guys, apparently the issue was that I renamed the img file #blackgoose.png# so the browser thought it was blackgoose.png.png
1 Like
Thats why i ask you for a Snapshot of the folder and i completely dismiss it…
Im glad you can solve it.
See later, good work!
PS: When you advance in your study, consider use an IDE, they will prevent you from made the errors we see here, the bad html tag, the p tag error, the doctype, etc.
Happy coding!
1 Like
Yes, done that already. Got VS Coder and Atom or something but VScoder made the error obvious to men.