What's wrong?


#1

The following line of code in an html file USUALLY will put a picture on a browser screen-
<p> <img src="cover.jpg"width="100" height="300"></p>

WHAT exceptions/conditions exist that would keep the picture from appearing, in any browser? The file is 270 x 400 px, file size 317k. What’s going on?

Spare me the lectures about getting a pro designer, if I could afford it, I might have done it, but I can’t.
They don’t show, but there is an opening and closing p on either end of this line.


#2

Hi there lombardy160

is your image in the same location as the HTML file?

Note that there should be a space between jpg" and width,
but that would not effect your issue. :winky:

coothead


#3

As @coothead suggests, the most common reason for this kind of problem is that the file path is incorrect.

I notice two things about your code which will not be causing the current issue, but which you should address anyway.

An image 270px x 400px scaled to 100px x 300px is going to be very distorted. You should scale to the same aspect ratio - and, as I’ve mentioned elsewhere, scale the image before you upload it. You also need to optimise the image, as 317kB is a huge file size for an image of those dimensions. I’d expect around 20 - 25 kB at most.


#4

There’s not a space in the origin code this came from, but the picture is there. Will take a look at the ratio, tho. Thanks!


#5

Why don’t you post a link to the current code or post a “working page” so we can evaluate the issue and respond accurately instead of guessing?


#6

Another common reason is incorrect case and misspelled file names. eg. “cover.jpg” is not “Cover.jpg”, “cover.jpeg”, “cover,jpg”, or “caver.jpg”. These kinds of typos aren’t always so easy to spot and can cause problems.


#7

There is no link. This is a work in progress in very early stage.


#8

But you DO have a web site. You can add the code that you are presently working on to a new, otherwise unused directory on that site so we can see what you see and the code that is causing the problem in action. As long as there is no link to that test directory on the main site no one will know it’s there.
Eeezee-Peezee :slightly_smiling_face:


#10

@lombardy160 I may be wrong but the above comments seems to be right but just in case try this out, Make sure your image path is correct so if its in the root directory with your lets say index.html then just use cover.jpg if its in an folder then it would be ‘Name-Of-Folder/cover.jpg’ :smiley: :

HTML:

<img src="YOUR IMAGE PATH" class="image1" alt="YOUR IMAGE ALT TEXT">

CSS:

.image1{
width:100px;
height:300px;
}

#11

@joey13: the width and height declarations in the HTML will not be causing a problem. It is good practice to declare the actual dimensions of the image there, even if you subsequently change the displayed size with CSS.

See https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML for more information.