Getting an Image to Display

HTML-CSS
1

First, my apologies for not having a Git-Hub repo. I don’t know how to use Git-Hub (yet); so I’m trying to keep my learning focused on HTML and CSS issues. Later, I’ll jump into javascript but before doing that I’ll learn about Git-Hub.

I am building a web page slowly, element by element using HTML and CSS. I try to avoid any stylng within my HTML by putting all of that into CSS files that I link to in the HTML. All is proceeding well until I try to put a photo (.jpg file) into the page using a DIV tag.

Here’s the DIV code.

<div class="parents-photo">
  /*put link to Healy & Pa photo here*/
  <img class="src=Images/healy-and-pa-ca-1956.jpg" alt="Healy and Pa in front of 527 ca.1956"> 
</div>

Here’s the code in the CSS file that styles the DIV

.parents-photo {
  display: inline-block;
  margin-top: 10px;
  margin-left: 5px;
  width: 290px;
  height: 180px;
  border: 1px  rgb(64, 1, 1);
  border-style: solid;
  background-color: rgb(237, 228, 215);
  font-family: "Comic Sans MS";
  color: rgb(245, 9, 9);
}

Here’s a screenshot of the result as displayed by Chrome:

Image result
Image result478×320 9.01 KB

The photo is in the jpg file (healy-and-pa-ca-1956.jpg) which resides in a subfolder called IMAGES which resides in the folder that contains my project. My HTML file also resides within the project folder. I think in understand the rule that says that if the object (the jpg file) and the source (the HTML file) are not in the same folder that the path to the object must include the qualifier pointing to the folder the object is in. That’s why I put the qualifier ‘Images’ in the path to the jpg file . . . because the html is a file one level above the object. If I have his wrong, then the path declaration is the problem. If I’m right about the path declaration, then I cannot explain why the image is not displaying.

TIA for any help.

2 
<img src="imageUrllHere" alt="llalalala">
1 Like
3

@ahraitch

Here’s the problem with your code the src attribute is inside of the "" within the code so the HTML is unable to find it due to that, aswell when you show an image inside of a class, you shouldn’t need the code <img class> due to the div being a class. The alt attribute in the code is fine so you did great there, but remember when you do <img src=""> in your code make sure the src attribute is outside of the "" in your code

Edit: Also when you add an image use the code <img src"imageurlhere.png>, always add the .png, .jpg, ect when you add images

Signed,
Slightplyz

Happy coding!

1 Like
4

OK, Thanks! Learning syntax is a bear.

I changed the HTML DIV tag as follows . . .

<div class="parents-photo">
  /*put link to Healy & Pa photo here*/
  <img src="Images/healy-and-pa-ca-1956.jpg" alt="Healy and Pa in front of 527 ca.1956"> 
</div>

Is this syntax correct? I still cannot get the image (the jpg image) to appear on the page.

Here are the paths to the HTML and the image
G:\HUTCHINS CLAN PROJECT\newHTML.html
G:\HUTCHINS CLAN PROJECT\Images\healy-and-pa-ca-1956.jpg

I have checked, rechecked and rechecked spelling over and over again.

The page still looks like this in Chrome.

DIV after img syntax change
DIV after img syntax change477×319 8.94 KB

5

Hi @ahraitch

The image is missing a file extension.
Also, the grey div opening tag may indicate a syntax error somewhere.

Happy coding

6

Thanks, I caught the missing file extension and fixed it but still no pic.

Here’s a ss of the vscode. I don’t know what the circled 1 means.

DIV VSC ss
DIV VSC ss667×289 19.7 KB

7

Hello is it posssible that the the code could be

<img src="images/imageurl>
1 Like
8

Right click on the image icon and open the image in a new page to check the file and folder exists. You may have a typo somewhere.

9

@slightlplyz
Are you suggesting that the word “Images” should not be capitalized? The folder name is capitalized, but I thought file and folder names were not case sensitive.

10

Teller, if you are suggesting that I right click the image icon on the chrome display (in the upper right corner), I did that to no effect.

I am bad for typos and continue to look for them.

11

@ahraitch
Figured it out, I’m working on a website, I renamed the images folder to IMAGES both microsoft edge, and vscode had no problem finding the images with the renamed folder, so it isn’t case sensitive, but what Teller was trying to say right click the image, and select the option Open image in new tab and see if it is in the right folder, and chrome actually sees the file.

1 Like
12

Go to the folder where the image is located, then use Open with then select a browser to open the image in a browser.

Then copy the url and paste it into the html file.

2 Likes
13

When i open my Profile picture in a new tab from fourms I get the URL

https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/slightplyz/48/382235_2.png

this would be how freecodecamp finds my PFP.

14

With the whole case sensitive thing, I went to my Style.CSS file and changed the code from

  background-image: url(../images/target-bgfrrrr.png);
  background-size: cover;
  color: #ffffff;
  text-align: center;
}

Then I changed it to

.target_section {
  background-image: url(../IMAGES/target-bgfrrrr.png);
  background-size: cover;
  color: #ffffff;
  text-align: center;
}

The background of the website is still found, so it could be a path problem

15

My target section has this picture as it

image
image1263×191 115 KB

I even changed the name of the actual Image it’s self, but MSEdge still found it, so I think it’s a path problem.

16

@ahraitch
So with my website i have the folder named Lumi-World-Website
Inside of that folder I have a new folder named the samething, but the folder inside of the main one holds the HTML, CSS, JS, Audio, and Images in it like this.

image
image208×231 4.62 KB

1 Like
17

I had already tried that. If I go to File Explorer and navigate to “G:\HUTCHINS CLAN PROJECT\Images\healy-and-pa-ca-1956.jpg” then right click and choose Open With Firefox, the image displays. However, if I copy that string (without the double quotations) and paste it into the HTML, the image does not display.

cum ca
cum ca522×282 18.8 KB

cum cs 2
cum cs 21239×935 93 KB

That tells me that the problem is not spelling but something else, but what?

18

See my response to Teller

19

Hi. A tip for you: When naming folders avoid using spaces. replace to _ or -

1 Like
20

Hi @ahraitch

Try replacing the spaces in the url with %20

Happy coding

1 Like