Where Can You Place an Image

HTML-CSS
1 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Penguins</title>
   
</head>
<body>
    <h1>From the Antarctic</h1>
    <img src="https://n.io.nordstrommedia.com/id/sr3/0f754d27-<br
    >6f99-4039-a0a8-7826e9a8f574.jpeg?crop=pad&pad_color=FFF&format=<br
    >jpeg&w=60&h=90&dpr=2" alt="penguins">
</body>
</html>

I was playing around with the img tag. When the image tag was in the section, I got the image to display. When the image tag was in the section as shown above, I got this- Screen Shot 2020-12-11 at 9.20.14 AM
no image shows. Does this mean that images have to go in the head section only?

2

@ttibsen

Correct “br” tag in your code, check as below

image
image2528Ă—738 156 KB

Hope this helps you

Thanks

3

Hi @ttibsen!

Just to clarify, no you should not put img tags in the head section.
But it looks like you modified your url for the src.

Yours has br tags in the url whereas @Srini84 does not.

If you try to go the url provided in your src it shouldn’t work.

This is the correct url.
https://n.io.nordstrommedia.com/id/sr3/0f754d27-6f99-4039-a0a8-7826e9a8f574.jpeg?crop=pad&pad_color=FFF&format=jpeg&w=60&h=90&dpr=2

4

Thanks so much for the responses. Just to further clarify -

“you should not put img tags in the head section”

OK - so img tags should only go in the body section? I’m not being argumentative here, but when I first played with the img tag, I placed it in the head section and it did work so just for the sake of being thorough here - I assume the following statement is true -

<< img tags belong in the body section but they will display properly in the head and the body sections >>

With respect to the src url, does placing br tags in the url wreck the img tag? I only placed the br tags in the url, because the url went way off the page in Visual Studio Code and if I wanted to see all of my code - the only way to do it was to place the break tags in the url

5

If you tried to copy the url with br tags it doesn’t work. Nothing shows up.

Screen Shot 2020-12-11 at 9.10.01 AM
Screen Shot 2020-12-11 at 9.10.01 AM2130Ă—898 24.2 KB

6

The src attribute on the img needs to point to the exact location where the image is stored. If you add extra characters to that location then it will not work. In this case you are pointing to an image using a URL, so you can’t change that URL by adding extra characters because the URL won’t work anymore if you do. It’s the same concept as if you added extra characters to google.com and then expected it to work.

To solve your issue you just need to turn on word wrap. In my version of VSC there is a Toggle Word Wrap option directly under the View menu.

1 Like
7

For the head section, it should be reserved for meta tags and other data not seen by the user. The head section is used to include relevant information for the browser. (Ex title tags, stylesheets, fontawesome links, etc)

8

Thanks to you both for the responses. I got it - no messing around with the url at all! Word Wrap is a marvel - just what the doctor ordered! Thanks for bringing it to my attention.