2

Olá, estou com dificuldade em exibir imagens dinâmicas utilizando sintax Razor, em um projeto asp.net MVC 5.

Tenho o caminho da imagem guardado em uma coluna na base de dados, de nome Imagem.

Abaixo o código da minha view:

@foreach (var item in Model) { 
<div class="item branding">
   <img src="@Html.DisplayFor(modelItem => item.imagem)" class="img-responsive" alt="" />
       <div class="works-overlay">
           <div class="wo-inner">
                <h4>@Html.DisplayFor(modelItem => item.nome)</h4>
           </div>
       </div>
</div>
}

Porém quando a view é renderizada, o src da imagem fica correto, da maneira que está salvo na base de dados: ~/Content/images/galeria/minha-imagem-123.jpg. Porem o caminho da imagem completo está incorreto, como exibido abaixo:

http://localhost:9474/Albuns/~/Content/images/galeria/minha-imagem-123.jpg 

Abaixo segue meu controller, com um método de listagem simples.

public ActionResult Index()
        {
            return View(db.portifolio.ToList());
        }

Alguém pode me ajudar em como eu faço para exibir corretamente as imagens? A ideia é armazenar no banco o caminho da imagem no servidor, após upload da mesma. E na hora de renderizar, apenas pegar o caminho da imagem.

Caso alguém tenha uma opinião melhor de armazenar/exibir imagens, por favor, pode comentar.

10
  • 1
    Aparentemente o seu Model está concatenando a sua página atual com a string do banco (que no caso é o path da image). Quem está formatando a url? Seria o Controller ou o Model (acredito que o seu Model apenas use get; set;)?
    – Syzoth
    Commented 29/12/2014 às 0:08
  • Sim, meu Model está apenas usando get; set; Commented 29/12/2014 às 11:23
  • Tem como adicionar o método que você está usando para concatenar a sua questão?
    – Syzoth
    Commented 29/12/2014 às 11:32
  • 1
    Erico, em meu projeto eu faço da seguinte maneira: no atributo src da tag image eu ponho assim e funciona, por exemplo: src="@Model.Foto" e dessa forma eu consigo pegar a foto no meu projeto e exibi-la. Commented 29/12/2014 às 13:49
  • @GuilhermeNascimento adicionei o método da action result. É uma listagem simples, onde pego os registro da base de dados, e uma delas é o caminho da imagem no servidor. Commented 29/12/2014 às 22:08

2 Respostas 2

4

Esta é a maneira incorreta de devolver uma imagem para o HTML, visto que você está expondo uma parte da sua infraestrutura no código.

O correto é você fazer uma Action apenas para devolver a imagem, mais ou menos assim:

    public FileResult Image(int id)
    {
        if (id != null)
        {
            var imagem = _db.Imagens.FirstOrDefault(x => x.ImagemId == id);
            if (imagem != null)
            {
                var imageFile = Server.MapPath("~/Content/images/galeria/" + imagem.imagem);
                return File(imageFile, "image/jpeg");
            }
        }

        return null;
    }

Uso:

<img src="~/Imagens/Image/5" alt="@item.nome" />

Pode até parecer mais trabalhoso, mas em termos de desempenho, é quase a mesma coisa e te garante segurança estrutural.

4
  • Certo, estou apenas um pouco confuso, essa "action", eu crio no meu controller? E como eu faço para controlar certinho a imagem de cada registro, sendo que minha action Index, tenho apenas um: return View(db.portifolio.ToList()); ? Commented 29/12/2014 às 22:07
  • 1
    Sim, cria a Action no Controller. O controle está no foreach, em que você manda o Id para a Action de imagem no Controller. Commented 29/12/2014 às 23:00
  • Quando eu utilizava projetos webforms, eu costumava armazenar o caminho completo onde a imagem é salva no servidor. Utilizando asp.net mvc, eu não preciso fazer isso, pelo action que escreveu como exemplo, posso simplesmente armazenar o nome da mesma, e criar a rota das imagens... correto? Commented 29/12/2014 às 23:34
  • 1
    Depois de algumas tentativas e um bom entendimento, deu tudo certo e funcionou corretamente dessa maneira. Obrigado @CiganoMorrisonMendez vlw Commented 30/12/2014 às 1:52
1

Após ler o seu comentário na resposta do @CiganoMorrisonMendez, percebi que você não está usando "rotas" nas imagens, então vou supor que as imagens mostram este caminho http://localhost:9474/Albuns/~/Content/images/galeria/minha-imagem-123.jpg quando você está acessando o endereço http://localhost:9474/Albuns/ e que o caminho ~/Content/images/galeria/minha-imagem-123.jpg é estático.

Isso quer dizer que você está usando caminho relativo quando deveria usar absoluto, você pode modificar o seu view, ao invés de usar assim:

<img src="@Html.DisplayFor(modelItem => item.imagem)" class="img-responsive" alt="" />

Use desta maneira:

<img src="/@Html.DisplayFor(modelItem => item.imagem)" class="img-responsive" alt="" />

(Eu tenho pouco conhecimento de "asp.net mvc", por isto não posso afirmar a maneira correta de usar o src)

O código inteiro deve ficar assim:

@foreach (var item in Model) { 
<div class="item branding">
   <img src="/@Html.DisplayFor(modelItem => item.imagem)" class="img-responsive" alt="" />
       <div class="works-overlay">
           <div class="wo-inner">
                <h4>@Html.DisplayFor(modelItem => item.nome)</h4>
           </div>
       </div>
</div>
}
4
  • 1
    Isso não resolve o problema. O problema é a exposição do diretório Content, que é estático e não manipulado por rotas, possibilitando ataques e acessos indevidos. Commented 29/12/2014 às 23:04
  • Obrigado @CiganoMorrisonMendez, mas é justamente por isto que eu até comentei que não havia entendido o problema, pois pensei que realmente ele estava usando "rotas" e concordo com a sua resposta, porém eu aqui apenas respondi aonde está a falha dele, devido ao meu baixo conhecimento de "asp.net mvc", não posso formular "dicas", apenas indicar a falha.
    – Syzoth
    Commented 29/12/2014 às 23:08
  • Galera, me desculpa se eu ainda estou um pouco confuso. Conforme a resposta do @CiganoMorrisonMendez e os comentários do Guilherme, enfim o problema é que eu quis utilizar uma técnica parecida com a que eu utilizava quando uso webforms, porem agora estou começando a entender que eu devia utilizar "rotas" nas imagens, o que é uma maneira melhor de exibir as imagens de meus registros.... certo? Commented 29/12/2014 às 23:32
  • 1
    @EricoSouza não sei em questão de "segurança", mas em questão de criar "url canonical" e até mesmo reduzir o tamanho do "path" visivel ao cliente, com certeza eu concordo com o uso de "rotas". No caso o Cigano disse para fazer o "trabalho" de tratamento no "for" dentro do "View", porém eu acredito que talvez você possa fazer isto no "Controller" em um método isolado e reaproveitar este método para outros "locais", mas se vai usar apenas neste View, então acho que você pode trabalhar perfeitamente dentro do próprio View. Claro isto é apenas a minha opinião.
    – Syzoth
    Commented 29/12/2014 às 23:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .