how come image wont load on website as href?

Question

im really new to this but heres my problem. I need to upload a pic onto my website (im using aptana studios 3). So i save my image as jpeg and use the code: now it acknowledges that I am uploading the picture but it won't load. Do i have to convert the image or save it a certain way?

Answer 1

Oh buddy, make sure to post the code you're having issues with. In any case, it doesn't really matter what file extension you use (though .png may be the best for web). I'm assuming this is hard-coded HTML, if that is the case, I would use a simple <img /> element to display a picture. Make sure the image is saved in a nearby directory.

<div>
    <div class="item"><img src="./example.png"/></div>
</div> 

In the example above, example.png is located in the same folder as my index.html file. We use the attribute src, not href. An href attribute dictates what page is to be loaded when an element, e.g. an <a> element, is clicked on. If you have a CSS stylesheet, it might be preferable to load the image as a background-image to a <div> element, so that it would be easier to manipulate image properties like height and width. An example of that would be:

<div>
   <div class="item"/></div>
</div>

..and the CSS:

.item {
    background-image: url("boxes.png");
    width: 800px;
    height: 600px;
    background-size: contain;
}

Here, I set the image's height and width, and tell my styles that I want the whole image to be show with background-size: contain;.

I hope this helps.