none
Exibir imagem em página web RRS feed

  • Pergunta

  • Olá!

    Sou novato em desenvolvimento Web e estou com a seguinte dúvida.

    Em um campo no meu BD guardo o caminho de uma imagem (\\NomeServidor\NomePasta\NomeArguivo.jpg), e esse campo é exibido na view como campo texto editável.

    Como capturar esse caminho e fazer com que a minha view exiba a imagem?

    Códigos:

    Controler

    public async Task<ActionResult> Edit(int? id)
            {
                if (id == null)
                {
                    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                }
                Livros livros = await db.Livros.FindAsync(id);
                if (livros == null)
                {
                    return HttpNotFound();
                }
                return View(livros);
            }
            
            [HttpPost]
            [ValidateAntiForgeryToken]
            public async Task<ActionResult> Edit([Bind(Include = "IDLivro,Titulo,Autor,CaminhoFotoCapa,Preco,Estoque,Disponivel")] Livros livros)
            {
                if (ModelState.IsValid)
                {
                    db.Entry(livros).State = EntityState.Modified;
                    await db.SaveChangesAsync();
                    return RedirectToAction("Index");
                }
                return View(livros);
            }

    Model

    public partial class Livros
        {
            [Key]
            public int IDLivro { get; set; }
    
            [Required]
            [StringLength(100)]
            public string Titulo { get; set; }
    
            [Required]
            public string Autor { get; set; }
    
            [StringLength(255)]
            public string CaminhoFotoCapa { get; set; }
    		
        }
    	

    View

    @model WebLearning.Models.Livros
    
    @{
        ViewBag.Title = "Edit";
    }
    
    <h2>Edit</h2>
    
    
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
            <h4>Livros</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.IDLivro)
    
            <div class="form-group">
                @Html.LabelFor(model => model.Titulo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Titulo, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Titulo, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Autor, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Autor, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Autor, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.CaminhoFotoCapa, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CaminhoFotoCapa, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CaminhoFotoCapa, "", new { @class = "text-danger" })
                </div>
            </div>
    	</div>
    }

    Obrigado.

    quarta-feira, 22 de novembro de 2017 14:24

Respostas

  • Problema resolvido.

    Houve alteração nos servidores da empresa e o servidor das imagens foi retirado da lista dos servidores com autorização de acesso web.

    O servidor já foi mapeado e o problema foi resolvido.

    Obrigado William e Maurício pela ajuda.

    • Marcado como Resposta Maurício.Santos segunda-feira, 4 de dezembro de 2017 09:36
    segunda-feira, 4 de dezembro de 2017 09:36

Todas as Respostas

  • Eu creio que o jeito mais simples de fazer isso é criar um campo ImagemBase64 no seu model. Esse campo é string e vai conter a representaçao Base64 da imagem. 

    Dete jeito:

    Model:

    public partial class Livros
        {
            [Key]
            public int IDLivro { get; set; }
    
            [Required]
            [StringLength(100)]
            public string Titulo { get; set; }
    
            [Required]
            public string Autor { get; set; }
    
            [StringLength(255)]
            public string CaminhoFotoCapa { get; set; }
    
            public string FotoCapaBase64 { get; set; }
    	
        }
    	

    No Controler voce vai ler a imagem e converter em base 64:

    private string ImageToBase64(Image image, 
      System.Drawing.Imaging.ImageFormat format)
    {
      using (MemoryStream ms = new MemoryStream())
      {
        // Convert Image to byte[]
        image.Save(ms, format);
        byte[] imageBytes = ms.ToArray();
    
        // Convert byte[] to Base64 String
        string base64String = Convert.ToBase64String(imageBytes);
        return base64String;
      }
    }
    
    public async Task<ActionResult> Edit(int? id)
            {
                if (id == null)
                {
                    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                }
                Livros livros = await db.Livros.FindAsync(id);
                if (livros == null)
                {
                    return HttpNotFound();
                }
                Image fotoCapa = Image.FromFile(livros.FotoCapaCaminho);//le a imagem do caminho
                livros.FotoCapaBase64= ImageToBase64 (fotoCapa,System.Drawing.Imaging.ImageFormat.Bmp);// converte em base64
    
                return View(livros);
            }
            

    Com o model contendo a imagem em formato base64 a modificaçao na view é minima:

    @model WebLearning.Models.Livros
    
    @{
        ViewBag.Title = "Edit";
    }
    
    <h2>Edit</h2>
    
    
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
            <h4>Livros</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.IDLivro)
    
            <div class="form-group">
                @Html.LabelFor(model => model.Titulo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Titulo, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Titulo, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Autor, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Autor, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Autor, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.CaminhoFotoCapa, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <img src="@Model.FotoCapaBase64" />
                </div>
            </div>
    	</div>
    }
    O segredo é setar o propriedade source da tag Img diretamete com a string base64 
    <img src="@Model.CampoImagemBase64" />

    att


    William John Adam Trindade
    Analyste-programmeur


    Sogi Informatique ltée
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer". Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".


    quarta-feira, 22 de novembro de 2017 18:12
    Moderador
  • William,

    Obrigado pela ajuda.

    O código 

    <img src="@FotoCapaBase64" />

    dava erro "The name 'FotoCapaBase64' does not exist in the current context".

    Fiz uma alteração no códio da view que ficou assim

    <img src="@Model.FotoCapaBase64", width="300", height="300" />

    mas a imagem não aparece.

    Pode me ajudar novamente?


    quinta-feira, 23 de novembro de 2017 19:01
  • Verifique se a imagem esta sendo caregada no controle.

    Coloque um breakpoint nessa linha:

        return View(livros);

    Inspecione o objeto livros e  verifique qual é o conteudo do campo FotoCapaBase64. Deve ter algo parecido com isso:

    iVBORw0KGgoAAAANSUhEUgAAAC4AAAAtCAYAAADRLVmZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADaWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBSaWdodHM9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9yaWdodHMvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wUmlnaHRzOk1hcmtlZD0iRmFsc2UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzE3RERGOUQ4NTdCMTFFMTkyMkZCNjE0NjY5MjE3RjUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzE3RERGOUM4NTdCMTFFMTkyMkZCNjE0NjY5MjE3RjUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTMyBXaW5kb3dzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InV1aWQ6NzdGNjlBRkQwRkE4REQxMTlEN0U4RkE0Mzk4NjQ5QUEiIHN0UmVmOmRvY3VtZW50SUQ9InV1aWQ6NkE4N0E2QjA1ODlGREQxMUEwNTdBMTNEQjU2Q0JBNEYiLz4gPC9yZGY6RGVzY3JpcHRpb24
    att


    William John Adam Trindade
    Analyste-programmeur


    Sogi Informatique ltée
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer". Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

    quinta-feira, 23 de novembro de 2017 19:22
    Moderador
  • William.

    Sim, o conteúdo do campo FotoCapaBase64 é algo semelhante ao que você informou.

    sexta-feira, 24 de novembro de 2017 08:48
  • tem como postar o conteudo do campo aqui?

    William John Adam Trindade
    Analyste-programmeur


    Sogi Informatique ltée
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer". Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

    sexta-feira, 24 de novembro de 2017 16:06
    Moderador
  • William,

    Não dá para postar.

    O campo de texto daqui do fórum aceita até 60000 caracteres e o conteúdo do campo FotoCapaBase64 é maior.

    sexta-feira, 24 de novembro de 2017 17:15
  • Mauricio

    O nome do servidor que você falou no banco começa com \\ (barra barra).

    O servidor é local ou web? 

    Se for web é bom colocar o http:// ao invés de \\.

    \\ funciona apenas local.

    Coloca <img src="<% atribuito %>"/> Com o endereço completo da imagem.

    As vezes as pessoas colocam só as pastas /imagem/foto com isso, é necessário colocar o endereço do servidor fixo, por exemplo: <img src=http://sites/"<% atributo %"/>


    Espero ter ajudado. Se ajudei, favor marcar no fórum falando que foi útil.

    Mauricio Junior - Comunidade www.ecode10.com

    sexta-feira, 24 de novembro de 2017 17:32
  • Neste caso faça esse teste.

    Copie e cole o codigo base64 neste site:

    https://codebeautify.org/base64-to-image-converter

    Caso o codigo seja valido ele deve mostar a imagem

    Att


    William John Adam Trindade
    Analyste-programmeur


    Sogi Informatique ltée
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer". Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

    sexta-feira, 24 de novembro de 2017 18:18
    Moderador
  • Maurício, 

    O servidor é local e mesmo que o código seja:

    <img src="\\NomeServidor\NomePasta\NomeArguivo.jpg", width="300", height="300" />

    a imagem não é exibida.

    Se eu informar o endereço \\NomeServidor\NomePasta\NomeArguivo.jpg, na barra de endereços do navegador, a imagem é exibida.

    sexta-feira, 24 de novembro de 2017 18:27
  • William,

    Colei o código e a imagem não apareceu.

    Verifiquei que haviam aspas no inicio e no fim do código, removi as aspas e o site exibiu a imagem apareceu.


    sexta-feira, 24 de novembro de 2017 18:29
  • Maurício, 

    O servidor é local e mesmo que o código seja:

    <img src="\\NomeServidor\NomePasta\NomeArguivo.jpg", width="300", height="300" />

    a imagem não é exibida.

    Se eu informar o endereço \\NomeServidor\NomePasta\NomeArguivo.jpg, na barra de endereços do navegador, a imagem é exibida.

    Nao entendi... isso nao vai funcionar.. por isso a necessidade de converter em base 64.

    O resultado final deveria ser (note que ue trunquei o codigo por questao de espaço):

    <img src="iVBORw0KGgoAAAANSUhEUgAAAC4... todo o codigo... MAAAAASUVORK5CYII= ", width="300", height="300" />

    Att


    William John Adam Trindade
    Analyste-programmeur


    Sogi Informatique ltée
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer". Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".


    sexta-feira, 24 de novembro de 2017 19:08
    Moderador
  • Olá!

    Encontrei e removi as aspas inicial e final do código base64 e ainda assim a minha view não exibe a imagem.

    domingo, 26 de novembro de 2017 13:42
  • Poste novamente os codigos do seu controles, model e view.

    Eu faço algo semelhante aqui e funciona. Ou sua imagem base64 esta corrompida ou voce nao esta carregando ela de forma apropriada.

    Att


    William John Adam Trindade
    Analyste-programmeur


    Sogi Informatique ltée
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer". Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

    segunda-feira, 27 de novembro de 2017 14:12
    Moderador
  • Problema resolvido.

    Houve alteração nos servidores da empresa e o servidor das imagens foi retirado da lista dos servidores com autorização de acesso web.

    O servidor já foi mapeado e o problema foi resolvido.

    Obrigado William e Maurício pela ajuda.

    • Marcado como Resposta Maurício.Santos segunda-feira, 4 de dezembro de 2017 09:36
    segunda-feira, 4 de dezembro de 2017 09:36