Como exibir uma imagem em html?

0

Eu sou novo no Ubuntu e queria escrever um site sobre ele. Estou acostumado com o Windows XP e estou acostumado a escrever o código da imagem de exibição da seguinte forma:

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

No Ubuntu eles não têm letras de unidade, o que devo fazer? Minha foto está em uma partição separada chamada Documents e, sob as propriedades do arquivo, diz que o diretório é:

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

No entanto, quando eu escrevo em html, apenas exibe a imagem no texto normal! Alguma ajuda?

    
por Anonymous 06.12.2011 / 16:19

4 respostas

3

As permissões podem atrapalhar você. Todo o caminho para a imagem deve ser legível pelo servidor da Web. Se você estiver usando o Apache rodando como o usuário www-data, então seus diretórios provavelmente devem ser configurados para 0755 (drwxr-xr-x), e os arquivos, 0644 (-rw-r - r--). Você pode ver as permissões em um console / shell com algo parecido com isto:

cd /media
ls -l

Você pode alterar as permissões com algo assim:

sudo chmod 0755 directory_name
sudo chmod 0644 file_name

Faça isso para cada diretório e todos os arquivos que você deseja acessar. Ou, em dois furtos, um para diretórios, um para arquivos, obtê-los todos sem escolher cada dir / arquivo:

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

Quando você sabe que as permissões estão corretas, você se beneficiaria criando um link simbólico para o diretório em vez de tentar referenciá-las todas pelo caminho absoluto do sistema de arquivos. Altere os diretórios para a raiz do documento do site. Digamos que isso seja / home / micah / public_html /.

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

Agora você tem um link simbólico, como um diretório virtual, para o local das imagens. Para que isso funcione, o Apache precisa saber que é permitido seguir o link sybmolic. Então, no seu arquivo de configuração do Apache, onde você definiu o seu site, procure na diretiva 'Directory' para ter certeza de que você especificou a opção "FollowSymLinks".

<Directory />
    Options FollowSymLinks
</Directory>

Reinicie o servidor da Web depois disso.

sudo service apache2 restart

Então, o XHTML é este:

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

A propósito, quando você tem espaços em um URI e para cada espaço em branco, substitua a entidade de caractere HTML, % 20 .

Se você está apenas criando arquivos HTML, ignore a parte do Apache.

    
por user8290 06.12.2011 / 16:54
2

Como vejo no seu código, sua foto tem um espaço em uma de suas pastas: / Homepage Website / Picture.jpg

Normalmente, isso não é uma boa ideia. Tente colocar um sublinhado:

/ Homepage_Website / Imagem

Também é uma boa prática colocar nomes de arquivos em baixo: "imagem" em vez de "Imagem".

Isso pode se transformar em problemas às vezes.

    
por Cmorales 06.12.2011 / 20:57
2

Então você tentou <img src="/media/Documents/Files/Micah/Homepage Website/Picture.jpg"> ?

    
por roadmr 06.12.2011 / 16:54
0

Embora você esteja usando o Ubuntu, esta é mais propriamente uma questão HTML. Lembre-se, o navegador da Web procurará primeiro na pasta em que o arquivo está aberto. Portanto, se sua página de abertura for index.html (os navegadores da Web procuram esse nome como padrão) e a imagem estiver na mesma pasta, o navegador carregará Picture.jpg com a largura e a altura definidas para ele.

Tal tem

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

Eu uso esse método para definir uma imagem de plano de fundo para um tipo de e-book que estou criando para uso pessoal, no qual uso um navegador da Web para acessar os documentos.

Você pode usar "../filename" para chegar a um arquivo na pasta anterior. Eu uso isso para retornar à página anterior e para referenciar a folha de estilo CSS que está sendo usada. Você precisa dessa referência em todos os documentos.

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

se a folha de estilo for uma pasta para trás.

Estou tentando encontrar um exemplo do meu trabalho de fazer referência a um arquivo em outra pasta para que você possa colocar todas as suas imagens em uma pasta Imagens. Mas é por algum tempo que fiz algum trabalho neste projeto. Eu vou te dar isso por enquanto.

Editar: parece que você simplesmente faz isso:

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

Ou isto:

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

Você pode encontrar este tutorial W3Schools for HTML útil

Atenciosamente.

    
por grahammechanical 06.12.2011 / 20:34