Show an image in mvc

Question

Hi, I’d like a hand.

I have the following controller to register an image and some fields, and the image property is string:

        [HttpPost]
        [ValidateInput(false)]
        [ValidateAntiForgeryToken]
        public ActionResult Cadastrar(NoticiaViewModel vm, HttpPostedFileBase file)
        {
            try
            {
                vm.ComboCategoriaId = new CategoriaRepositorio().BuscarTodos().Select(x => new SelectListItem { Text = x.NomeCategoria, Value = Convert.ToString(x.CategoriaId) });
                if (!ModelState.IsValid)
                {
                    return View(vm);
                }
                var mapper = Mapper.Map<NoticiaViewModel, Noticia>(vm);
                _repositorio.Salvar(mapper);
                if (file != null)
                {
                    String[] strName = file.FileName.Split('.');
                    String strExt = strName[strName.Count() - 1];
                    string pathSave = String.Format("{0}{1}.{2}", Server.MapPath("~/Imagem/noticias/"), mapper.NoticiaId, strExt);
                    String pathBase = String.Format("/Imagem/noticias/{0}.{1}", mapper.NoticiaId, strExt);
                    file.SaveAs(pathSave);
                    mapper.Imagem = pathSave;
                    _repositorio.Atualizar(mapper);
                }

                TempData["mensagem"] = "Noticia cadastrada com sucesso";
                return RedirectToAction("Index");
            }
            catch (Exception ex)
            {
                ModelState.AddModelError("", ex.Message);
                return View();
            }
        }

So far so good, I record the path where my image is. The problem is to show her:

        public ActionResult Visualizar(int id)
        {
            try
            {
                Noticia noticia = _repositorio.BuscarPorId(id);
                if (noticia == null)
                {
                    return HttpNotFound();
                }
                var mapper = Mapper.Map<Noticia, NoticiaViewModel>(noticia);
                return View(mapper);
            }
            catch (Exception ex)
            {
                ModelState.AddModelError("", ex.Message);
                return View();
            }
        }

I am using this to bring from the database the data of a certain news:

To View is like this:

<div class="panel-body">
        <div class="col-md-12">
            <div class="form-group">
                <small class="text-right">@Model.DataCadastro</small>
            </div>
            <div class="form-group">
                <h3 class="text-left">Categoria: <b>@Model.Categoria.NomeCategoria</b></h3>
            </div>
            <div class="form-group">
                <h2 class="text-center">Título: @Model.Titulo</h2>
            </div>

            <div class="form-group">
                @MvcHtmlString.Create(Model.Descricao)
            </div>
            <div class="">
                <img src="@Model.Imagem" />
            </div>
        </div>
    </div> 

But the image does not appear.

Can someone give me a hand?

Answer 1

Hello, in your code change the following section:

   mapper.Imagem = pathSave;

for:

   mapper.Imagem = pathBase;

What you are basically doing is saving the physical path of your image, not the url to display. You can always get the physical path of the image through the Mappaht method as you did in your code, so there are no problems in saving the Url.