Отображение изображений из папки wwwroot - PullRequest
Новая
       40

Отображение изображений из папки wwwroot

0 голосов
/ 27 апреля 2019

У меня есть проект, который требует, чтобы несколько изображений были сохранены в папке wwwroot.Ссылки на изображения сохраняются в базе данных.Итак, я написал функцию, которая извлекает ссылки на изображения и просматривает изображения, сохраненные в папке wwwroot.

Пока я могу получить только самое первое изображение в папке.К сожалению, другие изображения не возвращаются.

Ниже приведен код: 

  [HttpGet("images")]
        public IActionResult GetImages()
        {
            var results = _context.ImageTable.Select(i => i.ImageNames).ToList();

            foreach (var result in results)
            {
                var folderPath = Path.Combine(_hostingEnvironment.WebRootPath, "imagesFolder", $"{result}.png");

                var file= System.IO.File.ReadAllBytes(folderPath);

                return File(file, "image/jpg");
            }
            return NotFound("No Images");
        }


So what I'm expecting are all the images saved in the wwwroot folder to be displayed.

1 Ответ

0 голосов
/ 30 апреля 2019

Apprach 1 : вернуть массив urls и использовать javascript для создания серийного номера img в браузере: 

public class HomeController : Controller
{
    private IHostingEnvironment _env;

    // inject a hosting env so that we can get the wwwroot path
    public HomeController(IHostingEnvironment env){
        this._env = env;
    }
    public IActionResult GetImages()
    {
        // get the real path of wwwroot/imagesFolder
        var rootDir = this._env.WebRootPath;
        // the extensions allowed to show
        var filters = new String[] { ".jpg", ".jpeg", ".png", ".gif", ".tiff", ".bmp", ".svg" };
        // set the base url = "/"
        var baseUrl = "/";


        var imgUrls = Directory.EnumerateFiles(rootDir,"*.*",SearchOption.AllDirectories)
            .Where( fileName => filters.Any(filter => fileName.EndsWith(filter)))
            .Select( fileName => Path.GetRelativePath( rootDir, fileName) ) // get relative path
            .Select ( fileName => Path.Combine(baseUrl, fileName))          // prepend the baseUrl
            .Select( fileName => fileName.Replace("\\","/"))                // replace "\" with "/"
            ;
        return new JsonResult(imgUrls);
    }
}

Это вернет что-то, как показано ниже: 

[
"/imagesFolder/avatar.jpg",
"/imagesFolder/avatar.png",
"/imagesFolder/subFolder/suit-portrait-preparation-wedding-copy.jpg",
"/imagesFolder/subFolder/woman-street-walking-girl.jpg",
"/imagesFolder/subFolder/subFoler2/pexels-photo-copy1.jpg",
"/imagesFolder/subFolder/subFoler2/road-fashion-vintage-bag-copy.jpg"
]

Вам нужно отправить ajax-запрос этому методу действия, а затем создать связанный <img src={url}> с этими URL-адресами. Вот рабочий пример, который использует простой JavaScript: 

<script>
    var xhr = new XMLHttpRequest();
    xhr.onload=function(e){
        var urls=JSON.parse(e.target.responseText);
        for(var i = 0 ;i<urls.length;i++){
            var img = document.createElement("img");
            img.src = urls[i];
            document.body.appendChild(img);
        }
    };
    xhr.open("get","/home/getimages");
    xhr.send();
</script>

Подход 2 : Используйте Razor для визуализации представления на стороне сервера:

Измените метод действия, чтобы он возвращал результат просмотра: 

    public IActionResult GetImages()
    {
        // ...
        <strike>return new JsonResult(imgUrls);</strike>
        return View(imgUrls);
    }

Здесь 'GetImages.cshtml: 

@model IEnumerable<string>

<ul>
    @foreach (var url in Model)
    {
        <li><img src="@url" alt="@System.IO.Path.GetFileName(url)"/></li>
    }
</ul>

Оба должны работать.

...