Могу ли я явно указать тип MIME в теге img

Я пытаюсь отобразить favicon.ico на веб-странице не как ярлык, а как образ в теле страницы. На нашем тестовом сервере в IE изображения не отображались, и мы узнали, что это было потому, что MIME-тип, настроенный на сервере для .ico тип файла image/vnd.microsoft.icon вместо image/x-icon.

теперь мы смогли перенастроить наш сервер и устранить проблему, но мне было интересно, можно ли указать, какой тип MIME использовать в <img> тег и переопределить параметры сервера для конкретного файла?

6
html image mime-types

3 ответов

нет атрибута для указания типа носителя в img элемент. Если вы используете, например,object элемент вместо (это работает для изображений, но с некоторыми причудами), вы можете использовать type есть атрибут. Но его определение в HTML 4.01 говорит: "этот атрибут является необязательным, но рекомендуется, когда данные указаны, поскольку он позволяет агенту пользователя избегать загрузки информации для неподдерживаемых типов контента. Если значение этого атрибута отличается от HTTP Content-Type возвращаемый сервером при извлечении объекта приоритет имеет тип содержимого HTTP."В HTML5 CR это немного отличается, но дело все еще в том, что type атрибут не ожидается переопределить HTTP заголовки-совсем наоборот.

3

хорошая новость в том, что это is можно принудительно переопределить тип MIME изображения, если вы не можете полагаться на тот, который предоставляется сервером. Плохая новость заключается в том, что он полагается на Javascript и несколько взломан.

фон

я хотел использовать файлы, хранящиеся в моем Gitorious репозитории в тегах изображений HTML. Однако данные " raw " файла были помечены как text/plain сервером, который препятствовал отображению Internet Explorer их. Firefox и Chrome работали нормально, поэтому я предполагаю, что они должны игнорировать предоставленный тип MIME и выяснить фактический на основе данных изображения.

Проблема

вы не можете явно указать тип MIME для <img> - тег. Для один вещь, <img> теги не имеют :

"use strict";

// This function is called when any image tag fails to load.
function fixMIME()
{

  var img = this;

  // First of all, try to guess the MIME type based on the file extension.
  var mime;
  switch (img.src.toLowerCase().slice(-4))
  {
    case ".bmp":              mime = "bmp";     break;
    case ".gif":              mime = "gif";     break;
    case ".jpg": case "jpeg": mime = "jpeg";    break;
    case ".png": case "apng": mime = "png";     break;
    case ".svg": case "svgz": mime = "svg+xml"; break;
    case ".tif": case "tiff": mime = "tiff";    break;
    default: console.log("Unknown file extension: " + img.src); return;
  }
  console.log("Couldn't load " + img.src + "; retrying as image/" + mime);

  // Attempt to download the image data via an XMLHttpRequest.
  var xhr = new XMLHttpRequest();
  xhr.onload = function()
  {
    if (this.status != 200) { return console.log("FAILED: " + img.src); }
    // Blob > ArrayBuffer: http://stackoverflow.com/a/15981017/4200092
    var reader = new FileReader();
    reader.onload = function()
    {
      // TypedArray > Base64 text: http://stackoverflow.com/a/12713326/4200092
      var data = String.fromCharCode.apply(null, new Uint8Array(this.result));
      img.src = "data:image/" + mime + ";base64," + btoa(data);
    };
    reader.readAsArrayBuffer(this.response);
  };
  xhr.open("get", this.src, true);
  xhr.responseType = "blob";
  xhr.send();

}

// This callback happens after the DOCUMENT is loaded but before IMAGES are.
document.addEventListener("readystatechange", function() {
  if (document.readyState != "interactive") { return; }
  // Add an error handler callback to all image tags in the document.
  var t = document.getElementsByTagName("img");
  for (var i = 0; i < t.length; ++i) { t[i].addEventListener("error", fixMIME, false); }
}, false);

помните, что любой новая <img> теги, добавленные на страницу с помощью манипуляции DOM, не покрываются, поэтому вам нужно будет прикрепить слушателей к ним самостоятельно.

CORS

интересно отметить, что приведенный выше код вызывает как Firefox и Chrome жаловаться CORS при обработке недопустимых URL-адресов изображений:

Chrome:

XMLHttpRequest не удается загрузить http://www.google.com/notarealfile.png. Заголовок "Access-Control-Allow-Origin" отсутствует на запрашиваемом ресурсе. Таким образом, Origin 'null' не имеет доступа. Ответ имел код состояния HTTP 404.

Firefox:

Запрос Cross-Origin Заблокирован: Тот Же Источник Политика запрещает чтение удаленного ресурса по адресуhttp://www.google.com/notarealfile.png. Это можно исправить, переместив ресурс в тот же домен или включив CORS.

однако Internet Explorer 11, похоже, не заботится. Это работает довольно хорошо:

  • неправильные типы MIME отлично работают в Chrome / Firefox, поэтому нет XMLHttpRequest необходимо сделать.
  • неправильные типы MIME не будут работать в Internet Explorer, но XMLHttpRequest будет работать без проблем, связанных с CORS.

отказ от ответственности: правильно сделать, чтобы сервер отправил правильный тип MIME. Это довольно хакерский обходной путь, и я бы не рекомендовал его, если у вас действительно нет другого выбора.

5

Я пробовал в прошлом; однако, это всегда был мой опыт, что это должно быть настроено на сервере. Содержимое страниц должно всегда придерживаться стандартных типов файлов, чтобы избежать будущих проблем, таких как .формат PNG. ,GIF и .формат jpg. Только мои два цента. Надеюсь, это поможет.

1