Image not displaying in view for ASP.NET Core MVC app but dev tools shows it is there - asp.net-core-mvc

Question

I am still fairly new to ASP.NET Core and I am not 100% sure on what I am doing, but I have hobbled together a recipe keeper program, but I am having issues displaying the images.
When I run the program, the view shows that it is getting the image file name and the dev tools shows the correct src code, but the image is still not showing up. I have the code set to show a generic "no image" image when the view can't find the image assigned to the particular recipe but that shouldn't be the case.
I originally had this part working and I'm not sure why it is not anymore. I have tried to retrace my steps from when I noticed the issue, but it has been several days since I completed the image part of this program, so I am not sure where the issue is.
View showing image is there
Page showing generic image
DevTools showing the src
RecipeController:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;
using WhatsForDinner.Data;
using WhatsForDinner.Models;
namespace WhatsForDinner.Controllers
{
public class RecipesController : Controller
{
private readonly ApplicationDbContext _context;
private readonly IWebHostEnvironment webHostEnvironment;
public RecipesController(ApplicationDbContext context, IWebHostEnvironment webHostEnvironment)
{
_context = context;
this.webHostEnvironment = webHostEnvironment;
}
// GET: Recipes
public async Task<IActionResult> Index()
{
var applicationDbContext = _context.Recipes
.Include(r => r.ApplicationUser)
.Where(a => a.ApplicationUser.Id == HttpContext.User.FindFirst(ClaimTypes.NameIdentifier).Value);
return View(await applicationDbContext.ToListAsync());
}
// GET: Recipes/Details/5
public async Task<IActionResult> Details(int? id)
{
if (id == null || _context.Recipes == null)
{
return NotFound();
}
var recipe = await _context.Recipes
.Include(r => r.ApplicationUser)
.FirstOrDefaultAsync(m => m.RecipeId == id);
if (recipe == null)
{
return NotFound();
}
return View(recipe);
}
// GET: Recipes/Create
public IActionResult Create()
{
//ViewData["ApplicationUserId"] = new SelectList(_context.User, "Id", "Id");
//ViewBag.ApplicationUserId = HttpContext.User.FindFirst(ClaimTypes.NameIdentifier).Value;
return View();
}
// POST: Recipes/Create
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("RecipeId, UploadDateAndTime, RecipeTitle, RecipeDescription, PrepTime, NumOfServings, ServingSize, Ingredients, Directions, Notes, RecipePhoto, ApplicationUserId, RecipePhoto")] Recipe recipe, IFormFile file)
{
if (ModelState.IsValid)
{
string uniqueFileName = null;
if (file != null)
{
string uploadsFolder = Path.Combine(webHostEnvironment.WebRootPath, "Images");
uniqueFileName = file.FileName;
string filePath = Path.Combine(uploadsFolder, uniqueFileName);
using (var fileStream = new FileStream(filePath, FileMode.Create))
{
file.CopyTo(fileStream);
}
}
recipe.RecipePhoto = uniqueFileName;
recipe.ApplicationUserId = HttpContext.User.FindFirst(ClaimTypes.NameIdentifier).Value;
_context.Add(recipe);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
// ViewData["ApplicationUserId"] = new SelectList(_context.User, "Id", "Id", recipe.ApplicationUserId);
// ViewBag.ApplicationUserId = HttpContext.User.FindFirst(ClaimTypes.NameIdentifier).Value;
return View(recipe);
}
// GET: Recipes/Edit/5
public async Task<IActionResult> Edit(int? id)
{
if (id == null || _context.Recipes == null)
{
return NotFound();
}
var recipe = await _context.Recipes.FindAsync(id);
if (recipe == null)
{
return NotFound();
}
// ViewData["ApplicationUserId"] = new SelectList(_context.User, "Id", "Id", recipe.ApplicationUserId);
// ViewBag.ApplicationUserId = HttpContext.User.FindFirst(ClaimTypes.NameIdentifier).Value;
return View(recipe);
}
// POST: Recipes/Edit/5
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Edit(int id, [Bind("RecipeId, UploadDateAndTime, RecipeTitle, RecipeDescription, PrepTime, NumOfServings, ServingSize, Ingredients, Directions, Notes, ApplicationUserId")] Recipe recipe)
{
if (id != recipe.RecipeId)
{
return NotFound();
}
if (ModelState.IsValid)
{
try
{
recipe.ApplicationUserId = HttpContext.User.FindFirst(ClaimTypes.NameIdentifier).Value;
_context.Update(recipe);
await _context.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!RecipeExists(recipe.RecipeId))
{
return NotFound();
}
else
{
throw;
}
}
return RedirectToAction(nameof(Index));
}
// ViewData["ApplicationUserId"] = new SelectList(_context.User, "Id", "Id", recipe.ApplicationUserId);
// ViewBag.ApplicationUserId = HttpContext.User.FindFirst(ClaimTypes.NameIdentifier).Value;
return View(recipe);
}
// GET: Recipes/Delete/5
public async Task<IActionResult> Delete(int? id)
{
if (id == null || _context.Recipes == null)
{
return NotFound();
}
var recipe = await _context.Recipes
.Include(r => r.ApplicationUser)
.FirstOrDefaultAsync(m => m.RecipeId == id);
if (recipe == null)
{
return NotFound();
}
return View(recipe);
}
// POST: Recipes/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public async Task<IActionResult> DeleteConfirmed(int id)
{
if (_context.Recipes == null)
{
return Problem("Entity set 'ApplicationDbContext.Recipes' is null.");
}
var recipe = await _context.Recipes.FindAsync(id);
if (recipe != null)
{
_context.Recipes.Remove(recipe);
}
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
private bool RecipeExists(int id)
{
return _context.Recipes.Any(e => e.RecipeId == id);
}
}
}
I am not sure why the images are not showing anymore. Any thoughts?

Answer 1

I am not sure why the images are not showing anymore. Any thoughts?
Well, your issue is pretty obvious, as you are using type="image/*" to display image. However, this is not the correct way to do that. I have reproduced your issue thus have a look the solution as well.
Solution:
You should use accept="image/*"> instead of type="image/*". This the reason your image has not displayed. Your full code should be as following:
<td>
<object class="card-img-top" height="50" width="75" data="~/Image/#Html.DisplayFor(modelItem=>item.RecipePhoto)" accept="image/*">
</object>
</td>
Another way:
<td>
<object class="card-img-top" height="50" width="75" data="~/ImageName/Cover/#item.RecipePhoto" accept="image/*">
</object>
</td>
Output: