I’m following a book on website building.
FOr some reason, even though I’m following the instructions in the book and from various websites, the image won’t display when I view it in firefox.
Here is the mark-up:
<div id=“bodycontent”>
<h2>Image Gallery</h2>
<p>Below are some of the great views that club members have captured on various dive trips.</p>
<p>Please drop me a line (that’s Bob) if you would like to <a href="mailto:bob@bubbleunder.com">submit an image</a>. to this gallery.</p>
<p><img src=“gallery/turtle-bite.jpg” width=“400” height=“258” alt=“A turtle swims comfortably among the coral, despite its old injury-a large shark bite on one side”/></p>
</div> <!-- end of bodycontent div–>
</body>
</html>
What’s wrong with it? Why won’t it display the image? The image is in a folder called gallery, which is inside a folder with all my website stuff.
The websites and the book make it seem so simple to add an image, but I can’t make it work by using the img mark-up.
Yes, there’s a slight problem with your image path. The problem with src="gallery/turtle-bite.jpg" is that is assumes the page on which this link appears is in the root folder (or main folder with all your stuff in it) of your site. If it isn’t, then that link won’t work.
If your site is online, it will work if you add an extra slash at the front of the URL:
If you are just doing this on your computer at this stage, that won’t work, though. What you would have to do instead is modify the path so that the browser can find its way to the /gallery/ folder.
For example, if the page where this image appears is in, say, a /blog/ folder in your main folder, the URL would have to look like this:
The two dots followed by a slash means "go up one folder, then look for the /gallery/ folder, then find the image inside that. Hope that makes some sense.
