Mostrar Imagem através do seu link

Question

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

Answer 1

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

Answer 2

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 !

Answer 3

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" />

Answer 4

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 !

Answer 5

Olá,

Tirei o '~' do urlImagem

string urlImagem = string.Format("{0}/{1}", "/Images", photo.FileName);

E deu certo. Maldito '~' !

Muito obrigado xD