1

I am new to Ubuntu and I wanted to write a website on it. I am used to Windows XP and I am used to writing the display image code as follows:

img src="C:\Users\Username\My Pictures\Test.jpg" alt="Picture"

In Ubuntu they do not have drive letters, what should i do? My picture is in a separate partition named Documents and under the file properties it says the directory is:

/media/Documents/Files/Micah/Homepage Website/Picture.jpg

However when i write it into html it just displays picture in normal text! Any help?

muru
  • 197,895
  • 55
  • 485
  • 740
Anonymous
  • 11
  • 1
  • 1
  • 2

4 Answers4

3

Permissions might hinder you. The entire path to the image must be readable by the Web server. If you are using Apache running as the www-data user, then your directories should probably be set to 0755 (drwxr-xr-x), and the files, 0644 (-rw-r--r--). You can see the permissions in a console/shell with something like this:

cd /media
ls -l

You can change permissions with something like this:

sudo chmod 0755 directory_name
sudo chmod 0644 file_name

Do that for each directory and all the files you want to access. Or, in two swipes, one for directories, one for files, get them all without picking though each dir/file:

sudo find /media -type d -exec chmod 0755 {} \;
sudo find /media -type f -exec chmod 0644 {} \;

When you know the permissions are correct, you would benefit by creating a symbolic link to the directory instead of trying to reference them all by absolute file system path. Change directories to the website document root. Let's say this is /home/micah/public_html/.

cd /home/micah/public_html/
ln -s /media/Documents/Files/Micah/Homepage\ Website/ images

Now you have a symbolic link, like a virtual directory, to the location of the images. In order for this to work, Apache needs to know that it is allowed to follow the sybmolic link. So, in your Apache config file, where you have defined your website, look in the 'Directory' directive to make sure you have specified the "FollowSymLinks" option.

<Directory />
    Options FollowSymLinks
</Directory>

Restart the Web server after this.

sudo service apache2 restart

Then, the XHTML is this:

<img src="/images/Picture.jpg" width="" height="" alt="" title="" />

By the way, when you have spaces in a URI, and for each blank space, substitute the HTML character entity, %20.

If you are just creating HTML files, ignore the Apache part.

  • I don't think he's using Apache, he seems to be creating a purely-local webpage. Still your answer is very useful if Apache is involved! – roadmr Dec 06 '11 at 15:56
  • @roadmr purely local still needs a web server :) hee hee –  Dec 06 '11 at 15:58
  • @roadmr oh! goodness... single html files ... gotcha! yeah, you may be right! –  Dec 06 '11 at 16:10
2

So did you try <img src="/media/Documents/Files/Micah/Homepage Website/Picture.jpg">?

muru
  • 197,895
  • 55
  • 485
  • 740
roadmr
  • 34,222
  • 9
  • 81
  • 93
2

As I see in your code, your picture has a space in one of its folders: /Homepage Website/Picture.jpg

Usually, that's not a good idea. Try putting an underscore:

/Homepage_Website/Picture

It's also a good practice to put filenames in lowerscore: "picture" instead of "Picture".

That can turn into problems sometimes.

Cmorales
  • 1,308
  • 14
  • 25
0

Although you are using Ubuntu this is more properly a HTML question. Remember, the web browser will look first in the folder that the file is in that it is opening. So, if your opening page is index.html (web browsers look for that name as standard) and the image is in the same folder, then the brower will load Picture.jpg with the width and height set for it.

Such has

<img src="Picture.jpg" width="1000px" height="200px">

I use this method to set a background image to a kind of ebook that I am creating for my personal use where I use a web browser to access the documents.

You can use "../filename" to get to a file in the previous folder. I use that to return to the previous page and to reference the CSS stylesheet that is being used. You need that reference in every document.

<link rel="stylesheet" type="text/css" href="../stylesheetname.css" />

if the stylesheet is one folder backwards.

I am trying to find an example from my work of referencing a file in another folder so that you can put all your images in a Images folder. But it is awhile that I did any work on this project. I will give you this for now.

Edit: It seems that you simply do this:

<img src="/images/Picture.jpg" width="1000px" height="200px">

Or this:

<img src="/images/moreimages/Picture.jpg" width="1000px" height="200px">

You might find this W3Schools for HTML tutorials useful

Regards.

grahammechanical
  • 1,952