Dynamic carousel in ASP.NET Core

I'm building a simple web application, a cake shop in ASP Core for learning purposes and I was wondering if there is any way to build a dynamic carousel, meaning the images come from the server, they are not hardcoded into the HTML/CSS/JavaScript files. I am using Entity Framework for this project.

So far, I've only tried hardcoding them as could not find a way online to randomly choose an ID and display the image associated with that (a simple string, file name and extension).

Below I have my homepage controller, very basic as can be seen.

namespace CakeShop.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class CakeController : ControllerBase
    {
        private readonly ApplicationDbContext _context;
        private readonly IMapper _mapper;

        public CakeController(ApplicationDbContext context, IMapper mapper)
        {
            _context = context;
            _mapper = mapper;
        }

    // GET: api/Cake
    [HttpGet]
    public async Task<ActionResult<IEnumerable<CakeViewModel>>> GetCakes()
    {
        var cakesViewModels =  new List<CakeViewModel>();
        try
        {
            var cakes = await _context.Cakes.Include(cake => cake.Category).ToListAsync();
            cakesViewModels = _mapper.Map<List<CakeViewModel>>(cakes);

            // should move this in a service
            foreach (var cakeViewModel in cakesViewModels)
            {
                if (cakeViewModel.ImageName != null)
                {
                    string path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot\\images", cakeViewModel.ImageName);
                    byte[] b = System.IO.File.ReadAllBytes(path);
                    cakeViewModel.Base64Image = "data:image/jpg;base64," + Convert.ToBase64String(b);
                }
            }
        }
        catch(Exception ex) {}
        return cakesViewModels;
    }

    // GET: api/Cake/5
    [HttpGet("{id}")]
    public async Task<ActionResult<CakeViewModel>> GetCake(int id)
    {
        try
        {
            var cake = _context.Cakes.Include(c => c.Category).ToListAsync().Result.FirstOrDefault(c => c.CakeId == id);
            var cakeViewModel = _mapper.Map<CakeViewModel>(cake);

            if (cake == null)
            {
                return NotFound();
            }

            return cakeViewModel;
        }
        catch (Exception ex){}
        return NotFound();
    }
}

}

My JavaScript file associated with my HTML is as follows:

const cakeControllerUri = "/api/cake/";
var spinnerVisible = false;

function displayCakes(cakes) {
    $.each(cakes, function (key, cake) {
    $("#cakes").append('<div class="col-lg-4 col-md-6 mb-4"><div class="card h-100"><a href="#"><img class="card-img-top" height="200" src="' + (cake.base64Image ? cake.base64Image : "http://placehold.it/700x400" ) + '" alt=""></a><div class="card-body"><h4 class="card-title"><a href="/item/index.html?cakeid=' + cake.cakeId + '">' + cake.name + '</a></h4><h5>' + cake.price + ' lei</h5><p class="card-text">' + cake.description + '</p></div><h5 style="margin-left:1.25rem">' + cake.category + '</h5><div class="card-footer"><small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small><button type="button" onclick="deleteCake(' + cake.cakeId + ');" class="btn btn-danger" style="float: right;">Delete cake</button></div></div></div>');
    });
}

function getCakes() {
    $.ajax({
        type: "GET",
        url: cakeControllerUri,
        cache: false,
        success: function (cakes) {
            displayCakes(cakes);
            hideProgress();
        }
    });
}

function deleteCake(id) {
    var result = confirm("Do you really want to delete this cake?");
    if (result) {
        $.ajax({
            url: cakeControllerUri + id,
            type: "DELETE",
            success: function (result) {
                alert("Cake was deleted successfully!");
                location.reload();
            }
        });
    }
}

function showProgress() {
    if (!spinnerVisible) {
        $("#spinner").fadeIn("fast");
        spinnerVisible = true;
    }
}

function hideProgress() {
    if (spinnerVisible) {
        var spinner = $("#spinner");
        spinner.stop();
        spinner.fadeOut("fast");
        spinnerVisible = false;
    }
}

$(document).ready(function () {
    showProgress();
    getCakes();
});