ASP .NET Web Forms - Referenciando imagens

Neste artigo veremos como podemos referenciar imagens em um projeto ASP .NET Web Forms.

Podemos exibir imagens de diversas formas em aplicações ASP .NET Web Forms, e,  usar o controle image é a mais simples delas.

A classe Image exibe uma imagem em uma página Web e se você consultar a documentação em https://msdn.microsoft.com/pt-br/library/system.web.ui.webcontrols.image(v=vs.110).aspx, vai encontrar dezenas de propriedades e métodos que podemos usar.

A seguir alguns recursos básicos deste controle:

• O controle Image permite que você trabalhe com imagens do código do servidor.
• Use o controle Image para exibir qualquer imagem válida suportada pelo navegador solicitante na página da Web.
• O caminho para a imagem exibida é especificado definindo a propriedade Image.ImageUrl.
• Você pode especificar o texto a ser exibido no lugar da imagem quando a imagem não estiver disponível configurando a propriedade Image.AlternateText.
• O alinhamento da imagem em relação a outros elementos na página da Web é especificado definindo a propriedade Image.ImageAlign.

A propriedade ImageUrl é a propriedade onde você vai definir o caminho e nome da imagem a ser exibida e aqui cabe alguns esclarecimentos quanto a forma como podemos definir o valor desta propriedade:

1 - Exibindo uma imagem que esta na pasta Imagens usando o caminho absoluto

<img src="http://www.seuwebsite.com/Imagens/Imagem.jpg" />

2 - Exibindo uma imagem que esta na pasta Imagens na raiz do projeto ( / ) :

<img src="/Imagens/Imagem.jpg" />

3 - Exibindo uma imagem que esta na pasta Imagens no diretório atual ( ./ ) :

<img src="./Imagens/Imagem.jpg" />

4 - Exibindo uma imagem na pasta Imagens no diretório pai ( ../ ) :

<img src="../Imagens/Imagem.jpg" />

4 - Usando o operador raiz para identificar a raiz da aplicação atual  ( ~ ) :

<asp:image runat="server" id="Image"  ImageUrl="~/Imagens/Imagem.jpg" />

Exibindo imagens/páginas em Master Pages e User Control

Vimos que ~/ significa a pasta de raiz física da aplicação web. No entanto, usar esse recurso no seguinte formato não funcionará em uma página da Web com uma Master Page ou um User Control:

ImageUrl="~/Imagens/Imagem.jpg"

Para contornar esse problema podemos usar page.ResolveUrl() que traduz uma URL relativa ao aplicativo para uma URL absoluto.

<img src = '<%=Page.ResolveUrl ('~/Imagens/Imagem.jpg')%>' />

Dessa forma Page.ResolveUrl converte o ~ no caminho correto para o diretório do aplicativo atual.

Suponha agora que você tenha feito um User Control ou Controle de Usuário que você vai usar em muitas páginas diferentes. Parte do controle de usuário é um link para a página inicial.

Se você usar o Controle do Usuário em uma página com mais de um nível de profundidade, como por exemplo:  http: //website/folder1/Pagina1.aspx

e você referenciar assim :

<a href="./Home.aspx" runat="server"> Home </a>

irá ser resolvido como http: //website/folder1/Home.aspx

Agora se você usar Page.ResolveUrl :

<a href="<%= Page.ResolveUrl("~/Home.aspx")%> "runat =" server ">

Vai ser resolvido como http: //website/home.aspx, o que é muito mais provável que seja o que você deseja, pois o link estará correto em qualquer página.

Assim o comando Page.ResolveUrl lado do servidor resolveu a URL da raiz ao usar '~'.