TransWikia.com

Exibir imagem salva no banco de dados e permitir que o usuário altere a imagem

Stack Overflow em Português Asked by user46439 on December 16, 2021

Estou recuperando as informações do banco de dados e verificando se os campos de GIF e Imagem estão nulos ou não para exibir ao usuário a melhor opção na View Edit.

De qualquer forma, segue o código onde faço essa verificação:

<div class="col-xs-12 col-md-4 col-md-offset-3 col-sm-8 col-sm-offset-2">
    <label class="control-label">Logo</label>
    @{
        if (Model.Logo == null)
        {
            <div class="input-group image-preview">
                <input class="form-control image-preview-filename" disabled="disabled" type="text" />
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default image-preview-clear" style="display:none;">
                        <span class="icon-remove"></span> Limpar
                    </button>
                    <div class="btn btn-blue-grey image-preview-input">
                        <span class="icon-folder-open"></span>
                        <span class="image-preview-input-title">Selecionar</span>
                        <input type="file" accept="image/png, image/jpeg" name="img" />
                    </div>
                </div>
            </div>
        }
        else
        {
            string imgbase64 = Convert.ToBase64String(Model.Logo);
            string imgsrc = string.Format("data:image/png;base64,{0}", imgbase64);

            <div class="form-group">
                <div class="btn btn-blue-grey image-preview-input">
                    <span class="icon-folder-open"></span>
                    <span class="image-preview-input-title">Alterar</span>
                    <input type="file" accept="image/png, image/jpeg" name="img" />
                </div>
                <button class="btn btn-light-blue" id="view-img">
                    <span class="icon-eye2"></span> Visualizar
                </button>
            </div>
            <div class="form-group">
                <img src="@imgsrc" width="250" height="200" class="img-thumbnail" />
            </div>
        }
    }
</div>

No caso de o campo estar nulo, consigo exibir ao usuário a opção de fazer o upload normalmente de um gif ou imagem, e ele consegue alterar normalmente antes de dar o post. Porém, a dificuldade vem quando já existe uma imagem salva no campo e eu preciso exibir.

Gostaria de exibir ao usuário uma forma dele visualizar a imagem que já está salva em um popup e caso ele queira alterar a imagem, mudar o campo para o mesmo que é exibido na situação onde o campo vem nulo.

Já faço alguma coisa com javascript quando o campo é nulo, mas não consigo visualizar uma solução quando a informação já existe no banco.

One Answer

Para exibir:

Model:

public class Item
{
    public int Id { get; set; }
    public byte[] Image { get; set; }
}

Controller:

public async Task<ActionResult> RenderImage(int id)
    {
        Item item = await db.Items.FindAsync(id);

        byte[] photoBack = item.Image;

        return File(photoBack, "image/png");
    }

View:

<img src="@Url.Action("RenderImage", new { id = Model.Id})" />

Answered by Ayrton Giffoni on December 16, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP