Usuário com melhor resposta
Mostrar Imagem através do seu link

Pergunta
-
Bom dia,
Estou tentando pegar link de uma imagem no banco de dados e exibir na view Index. Assim que faço o upload da imagem, o endereço da mesma é gravado corretamente no banco de dados mas quando vejo o que tem na variável responsável, sempre tem "System.Web.HttpPostedFileWrapper" e não consigo exibir a imagem na view.
View Create.
@model Profile.Models.Pessoa @{ ViewBag.Title = "Create"; } <h2>Create</h2> @using (Html.BeginForm("Create", "Pessoa", FormMethod.Post, new { enctype = "multipart/form-data" })) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <fieldset> <legend>Pessoa</legend> <div class="editor-label"> @Html.LabelFor(model => model.Nome) </div> <div class="editor-field"> @Html.EditorFor(model => model.Nome) @Html.ValidationMessageFor(model => model.Nome) </div> <div class="editor-label"> @Html.LabelFor(model => model.Foto) </div> <div class="editor-field"> @Html.TextBoxFor(model => model.Foto, new { type = "file", id = "foto", name = "foto" }) </div> <p> <input type="submit" value="Create" /> </p> </fieldset> }
Ação Create
[HttpPost] [ValidateAntiForgeryToken] public ActionResult Create(Pessoa pessoa) { string path = @"C:\Users\Thiago\Desktop\Profile\Profile\Imagens\"; HttpPostedFileBase photo = Request.Files["foto"]; if (photo != null) photo.SaveAs(path + photo.FileName); pessoa.Foto = path + photo.FileName; if (ModelState.IsValid) { db.Pessoas.Add(pessoa); db.SaveChanges(); return RedirectToAction("Index"); } return View(pessoa); }
View Index
@model IEnumerable<Profile.Models.Pessoa> @{ ViewBag.Title = "Index"; } <h2>Index</h2> <p> @Html.ActionLink("Create New", "Create") </p> <table> <tr> <th> @Html.DisplayNameFor(model => model.Nome) </th> <th> @Html.DisplayNameFor(model => model.Foto) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Nome) </td> <td> <img src="@Url.Content(item.Foto)" /> </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.id }) | @Html.ActionLink("Details", "Details", new { id=item.id }) | @Html.ActionLink("Delete", "Delete", new { id=item.id }) </td> </tr> } </table>
Alguém já passou por isso antes ?
Obrigado
Respostas
-
Você está gravando o caminho físico da imagem e não a URL dela na sua aplicação.
O primeiro detalhe é que os endereços na internet são com "/" e não com "\".
Para exibir uma imagem enviada você tem duas alternativas.
1. gravar a imagem em uma pasta dentro da sua aplicação e construir a url para exibir
2. recuperar os bytes da imagem e retornar os mesmos em uma action separada
- Marcado como Resposta _Omnislash_ segunda-feira, 28 de abril de 2014 22:29
-
A classe HttpPostedFileWrapper é o "envelope" do seu upload. Nesse objeto você pode recuperar o nome do arquivo, o tamanho dele em bytes, etc.
Grave seus arquivos dentro de uma pasta na sua aplicação (ex: ~/upload/images).
string dirPath = Server.MapPath("~/upload/images"); string urlImagem = string.Format("{0}/{1}", "/upload/images", photo.FileName); string filePath = string.Format("{0}\{1}", dirPath, photo.FileName); foto.saveAs(filePath); pessoa.Foto = urlImagem;
Depois é só exibir a imagem com o <img src="@Model.Foto" />
- Marcado como Resposta _Omnislash_ segunda-feira, 28 de abril de 2014 22:29
Todas as Respostas
-
Você está gravando o caminho físico da imagem e não a URL dela na sua aplicação.
O primeiro detalhe é que os endereços na internet são com "/" e não com "\".
Para exibir uma imagem enviada você tem duas alternativas.
1. gravar a imagem em uma pasta dentro da sua aplicação e construir a url para exibir
2. recuperar os bytes da imagem e retornar os mesmos em uma action separada
- Marcado como Resposta _Omnislash_ segunda-feira, 28 de abril de 2014 22:29
-
Olá,
A imagem está em uma pasta da minha aplicação. O que eu quero é gravar o diretório da minha imagem no banco de dados e quando precisar exibi-la, apenas pego o endereço desse diretório e a exibo na view. Mas como expliquei, sempre tem esse "System.Web.HttpPostedFileWrapper" na variável responsável por armazenar o diretório da imagem, que é variável Foto.
Meu Model.
public int id {get; set;} public string Nome {get; set;} public string Foto [get; set;}
Obrigado !
-
A classe HttpPostedFileWrapper é o "envelope" do seu upload. Nesse objeto você pode recuperar o nome do arquivo, o tamanho dele em bytes, etc.
Grave seus arquivos dentro de uma pasta na sua aplicação (ex: ~/upload/images).
string dirPath = Server.MapPath("~/upload/images"); string urlImagem = string.Format("{0}/{1}", "/upload/images", photo.FileName); string filePath = string.Format("{0}\{1}", dirPath, photo.FileName); foto.saveAs(filePath); pessoa.Foto = urlImagem;
Depois é só exibir a imagem com o <img src="@Model.Foto" />
- Marcado como Resposta _Omnislash_ segunda-feira, 28 de abril de 2014 22:29
-
Olá,
Criei a pasta Images, porém não estou conseguindo exibir a imagem.
O Create está assim:
public ActionResult Create([Bind(Include="id,Nome,Foto")] Pessoa pessoa) { HttpPostedFileBase photo = Request.Files["foto"]; string dirPath = Server.MapPath("~/Images"); string urlImagem = string.Format("{0}/{1}", "~/Images", photo.FileName); string filePath = string.Format("{0}/{1}", dirPath, photo.FileName); photo.SaveAs(filePath); pessoa.Foto = urlImagem; if (ModelState.IsValid) { db.Pessoas.Add(pessoa); db.SaveChanges(); return RedirectToAction("Index"); } return View(pessoa); }
View Index ( onde tento exibir a imagem ):
@model IEnumerable<Profile.Models.Pessoa> @{ ViewBag.Title = "Index"; } <h2>Index</h2> <p> @Html.ActionLink("Create New", "Create") </p> <table class="table"> <tr> <th> @Html.DisplayNameFor(model => model.Nome) </th> <th> @Html.DisplayNameFor(model => model.Foto) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Nome) </td> <td> <img src="@item.Foto"/> </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.id }) | @Html.ActionLink("Details", "Details", new { id=item.id }) | @Html.ActionLink("Delete", "Delete", new { id=item.id }) </td> </tr> } </table>
Consigo gravar o endereço no banco de dados, apenas não consigo exibir a imagem =/
Muito obrigado !
-