Hi rani,
Check this example. Now please take its reference and correct your code.
Bind the Images from Database.
Namespaces
using System.IO;
using Microsoft.AspNetCore.Hosting;
Controller
public class HomeController : Controller
{
private IWebHostEnvironment Environment;
public HomeController(IWebHostEnvironment _environment)
{
Environment = _environment;
}
public IActionResult Index()
{
List<string> images = new List<string>();
string[] filePaths = Directory.GetFiles(Path.Combine(this.Environment.WebRootPath, "Images"));
foreach (string filePath in filePaths)
{
string fileName = Path.GetFileName(filePath);
images.Add("Images/" + fileName);
}
ViewBag.Images = images;
return View();
}
}
View
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<img alt="" src="" id="img1" />
<div id="dvImages" style="display: none">
@foreach (string Image in ViewBag.Images)
{
<img alt="" src="@Image" />
}
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/matdumsa/jQuery.threesixty/master/jquery.threesixty.js"></script>
<script type="text/javascript">
$(function () {
var arr = new Array();
$("#dvImages img").each(function () {
arr.push($(this).attr("src"));
});
$("#img1").attr("src", arr[0]);
$("#img1").threesixty({
images: arr,
method: 'mousemove',
sensibility: 1
});
});
</script>
</body>
</html>
Screenshot
