I can't add image to .html file in TextEdit on my computer

Language Help HTML
1

https://www.codecademy.com/en/courses/web-beginner-en-HZA3b/2/3?curriculum_id=50579fb998b470000202dc8b

I can do the “add images” exercise here at codecademy just fine. But when I try to do the same thing in a .html file in TextEdit on my Mac, it doesn’t work. I’ve tried multiple things:

  1. I made sure that the image was in the same folder as the TextEdit .html file. Didn’t work.
  2. I wrote the complete file path to the image. Didn’t work.
  3. I tried making the letters uppercase or lowercase. Didn’t work.
  4. I tried using single quotes instead of double quotes. Didn’t work.
  5. Finally I tried just copying a random weblink picture, and that didn’t work either.

I am able to drag the image onto the browser and have it display, so I know the image is not corrupted.

What am I doing wrong? The other text and paragraphs display just fine. But the images display as a blue question mark in a small box.

Here are a few examples of what I tried:

``` 
<do not remove the three backticks above>
2

open the image in your browser and copy the link, it should work. Reply saying if it works

3

does the name also match? your image should be called filename.jpg

the image name should match the value which you give to src

What are you using? “ don’t look like quotation marks (")

1 Like
4

@josephstalion
Trying that suggestion now. Copying the file link:
file:///Users/MyAccount/Desktop/WebsitePhotos/BT7A0004.jpg

pasting that into the code like this:
<img src="file:///Users/MyAccount/Desktop/WebsitePhotos/BT7A0004.jpg” />

still not working

5

@stetim94
yes I copy and paste the image name so that it matches. I’ve tried with a few different images, none of them working.
I’m not sure why my quotation marks look odd. I just tried going to preferences and unchecking the “use smart quotes” but it still changes them when I type in a TextEdit document. My settings are plain text, so not sure why this happens.

6

<img src="file:///Users/MyAccount/Desktop/WebsitePhotos/BT7A0004.jpg” />

7

Sorry, it’s not letting me paste in here.
<img src="file:///Users/MyAccount

8
9

anyway, it’s still not working

10

this problems are so difficult to trouble shoot from here. Upload a image of the directory with files + path and an updated version of your code with markup:

11

All the pictures and the html file are in the exact same folder. The path will be the same for all of them. So, do I even need to put the path in the file, or just the filename with extension?

12

@stetim94 Problem solved. You were correct. It was the quotation marks. The solution was going to system preferences, unchecking “smart quotes,” and then rebooting the system. Now the pictures will display. :sunglasses:

13

yes, the are two types of paths, absolute:

/Users/MyAccount/Desktop/WebsitePhotos/BT7A0004.jpg

which starts with /, and relative path (starts at the directory which contains the html file:

imagename.jpg

you can also use directory’s inside the directory which contains the html file. And .. for previous directory. Just google relative file path, sure you will find it

Good to hear you solved it :slight_smile:

14

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