none
Mostrar Imagem através do seu link RRS feed

  • 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

    segunda-feira, 28 de abril de 2014 14:44

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
    segunda-feira, 28 de abril de 2014 18:34
    Moderador
  • 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
    segunda-feira, 28 de abril de 2014 20:02
    Moderador

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
    segunda-feira, 28 de abril de 2014 18:34
    Moderador
  • 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 !

    segunda-feira, 28 de abril de 2014 19:19
  • 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
    segunda-feira, 28 de abril de 2014 20:02
    Moderador
  • 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 !

    segunda-feira, 28 de abril de 2014 22:07
  • Olá,

    Tirei o '~' do urlImagem

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

    E deu certo. Maldito '~' !

    Muito obrigado xD

    segunda-feira, 28 de abril de 2014 22:29