Блог

Главная - Вопросы по программированию - Как передать данные изображения в тег img?

Как передать данные изображения в тег img?

#c# #html #asp.net-mvc

#c# #HTML #asp.net-mvc

Вопрос:

У меня есть следующий HTML-элемент:

 <img src='profilePic?userName' class='form-avatar'></img>

у моего контроллера есть этот метод:

         [System.Web.Mvc.HttpGet]
        public async Task<ActionResult> profilePic()
        {
            string userName = Request.Url.ToString().Split('?').Last();

            string profilePic = await GraphHelper.GetProfilePicAsync(userName);

            return Content(profilePic);
        }

содержание profilePic таково

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

но тег изображения не загружает изображение, и когда я проверяю его, он показывает:

 <img src='profilePic?userName' class='form-avatar'></img>

когда то, чего я хочу, это

 <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' class='form-avatar'></img>

Как мне этого добиться?

Ответ №1:

« data:image/png;base64,... » — это кодировка изображения на base64, которая позволяет встраивать его непосредственно в HTML. Если вместо этого вы хотите ссылаться на него по URL, вам нужно будет вернуть фактическую двоичную информацию в необработанном виде, преобразовав ее из base64.

 // Your code
var profilePicEncoded = profilePic.Replace("data:image/png;base64,", "");
var bytes = Convert.FromBase64String(profilePicEncoded);
return File(bytes , "image/png");

Это вернет двоичное изображение в формате png, которое затем можно будет свободно встроить.

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

1. Большое вам спасибо, я не могу сказать вам, как долго я искал этот ответ. Я предположил, что, возможно, данные были закодированы, но это имеет гораздо больше смысла!

Ответ №2:

Эххрм .. это не сработает, потому что, когда вы делаете что-то подобное:

 <img src="http://blah.com/logo.png">

Ваш браузер не загружает файл logo.png, base64, вставьте его в атрибут src в DOM, затем интерпретируйте его и отобразите

Сказал по-другому, в src вы либо помещаете:

  • url-адрес, например «http://yourhost.com/api/path/to/your/controller/action «
  • данные в кодировке base64, например «данные:….»

Если вы сделаете последнее, то данные png base64 будут вставлены в HTML-код во время отправки HTML-кода в браузер..