Отображение изображения в MVC

#c# #asp.net-mvc #razor

#c# #asp.net-mvc #razor

Вопрос:

Я пытаюсь отобразить изображение из базы данных. Но я получаю следующую ошибку.

Лучший перегруженный метод подходит для System.Web.Mvc.UrlHelper.Содержимое (строка) имеет некоторые недопустимые аргументы.

Вот мой код:

 <table>
    <tr>
        <td>
            Category ID
        </td>

        <td>
            Category Name
        </td>

        <td>
            Category Image
        </td>
    </tr>
    @foreach (var item in Model)
    {
    <tr>
        <td>@item.CategoryID</td>
        <td>@item.CategoryName</td>
        <td><img src="@Url.Content(item.CategoryImage)" /></td>

    </tr>
    }
</table>
  

Комментарии:

1. какое значение вы получаете : item.CategoryImage ?

2. какой тип данных item.CategoryImage ? Это должна быть строка, указывающая путь к изображению, и я думаю, что вы передаете ей байты, и в этом случае @Url.Content это неправильный выбор.

3. Я просто получаю эту ошибку. Лучший перегруженный метод подходит для System.Web.Mvc.UrlHelper. Содержимое (строка) имеет некоторые недопустимые аргументы.

4. @Crowcoder да. передавая его байтами. Использование byte[] в качестве типа данных для поля изображения

5. msdn.microsoft.com/en-us/library/…

Ответ №1:

Это код, который я использую :

     private static string ImageByteToBase64ImageTag(byte[] array)
    {
        string base64 = Convert.ToBase64String(array);
        return "<img class="img-responsive center-block" src="data:image/png;base64,"   base64   " "  />";
    }
  

В этом случае было бы намного проще работать с изображением как с изображением base64. Мой код довольно прост, но все, что вам нужно сделать, это передать массив изображения и получить строку base64. Вы даже можете вернуть изображение через JSON, если правильно его отформатируете. Вы можете вернуть только следующую часть в ViewBag или Model:

 ViewBag.ImageData = "data:image/png;base64,"   base64String
  

И в вашем html

   <img src="@Html.Raw(ViewBag.ImageData)" />
  

Или в вашей модели просто создайте строковое свойство для изображения.

Комментарии:

1. Как обсуждалось в комментариях под вопросом: это подход, но он может быть не самым жизнеспособным. Это зависит от многих факторов, в том числе от количества и размера изображений. Если мы говорим о 1 МБ изображений и 1 КБ HTML, то на вашей странице внезапно будет больше 1,3 МБ HTML (из-за встроенных изображений в кодировке base-64), и браузер не начнет рендеринг до загрузки всего HTML.

Ответ №2:

 public ActionResult GetImage()
{
   var imageFile = System.Web.HttpContext.Current.Server.MapPath("ImagePathHere");
   var srcImage = Image.FromFile(imageFile);
   using (var stream = new MemoryStream())
   {
      srcImage.Save(stream, ImageFormat.Png);
      return File(stream.ToArray(), "image/png");
   }
}
  

Комментарии:

1. Переполнение стека — это не сайт «поделитесь своим любимым фрагментом». Этот метод действия предполагает, что файл существует на диске, в то время как в этом вопросе он находится в столбце базы данных. Ответ только для кода также не является хорошим ответом, попробуйте добавить некоторое объяснение того, что делает код в следующий раз.

2. Если вы проверите код, прежде чем говорить, вы увидите, что этот метод File получает byte[] и возвращает FileContentResult, и вы можете понять, что я имею в виду.

3. Если вы объясните, что делает код перед его сбросом, мне не придется читать его построчно, чтобы попытаться понять, что вы пытаетесь сказать. При этом я придерживаюсь своего предыдущего комментария: опубликованный вами код ожидает, что файл будет существовать, чего здесь нет.

4. Кроме того, этот код преобразует любой формат изображения в PNG, что является очень ресурсоемким.

5. В моих кодах 5 строк, поэтому, я думаю, вы не потратите на них много времени, если будете читать их построчно. Вы можете изменить формат изображения. И да, мой код ожидает файл, но парень, который задал этот вопрос, сохраняет данные в виде байта []! Но мне жаль, что я не написал несколько объяснений, потому что я ответил вам больше.