Блог

Главная - Вопросы по программированию - Ненадежная настройка источника изображения с помощью Javascript в Internet Explorer

Ненадежная настройка источника изображения с помощью Javascript в Internet Explorer

#javascript #internet-explorer #getelementbyid

#javascript #internet-explorer #getelementbyid

Вопрос:

Я просто пытаюсь изменить SRC атрибут изображения с помощью javascript следующим образом:

 document.getElementById('fooImage').src = img;

Где img — переменная, имеющая ссылку на файл.

Во всех других браузерах (Chrome, Firefox, Safari) это работает. В IE (7 ) это тоже иногда работает.

Используя встроенные инструменты разработчика IE, я вижу, что SRC тег изображения установлен. Есть ли что-то еще в окне locals, что могло бы помочь мне отладить, почему изображение на самом деле не отображается на экране?

Я также пытался использовать jQuery для этого и тот же результат:

 $("#fooImage").attr("src", img);

Идеи?

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

1. Похоже, это сработает, но вы можете попробовать document.getElementById(‘fooImage’).setAttribute(‘src’,img) просто чтобы убедиться.

2. Из любопытства, вы проверили размеры изображения и размер файла? Недавно у меня была аналогичная проблема, когда после нескольких неудачных моментов я обнаружил, что IE просто отказывается от попыток загрузить изображения после передачи определенного размера. В моем случае это была какая-то возмутительная вещь высотой 44 000 пикселей. Я до сих пор не знаю, был ли это размер файла или размеры изображения, но в любом случае это был один из них.

3. Можете ли вы создать скрипку, которая показывает это? Кажется неправильным. Что именно img ? Это полный URL, относительный URL или что-то еще?

4. Спасибо за ваши ответы! @JamesHay это тоже не сработало.. @kaiqun изображение имеет размер 300×608, а фактический размер — 115 КБ .. @mrtsherman, img это относительный URL-адрес

5. @epascarello я в это не верю .. поможет ли это кэширование?

Ответ №1:

При отладке этого я бы сначала жестко закодировал его…

 document.getElementById('fooImage').src = "myimage.png";

Я использовал следующее на своем веб-сайте, и это работает следующим образом…

 var imgCounter = document.getElementById('formtimer');
imgCounter.src = "graphics/odometers/1.png";

Некоторые другие вещи, которые нужно проверить:

  1. Убедитесь, что ваш тег ID= находится не в <DIV разделе, а внутри <IMG раздела… например <div class="style1"><img src="yourpicture" id="someid"> . Если `id = ‘someid’ находится в теге div, вы не можете изменить изображение / изображение не будет отображаться.
  2. используете ли вы window.onload?, body onload? правильный способ использовать первый.. 
      window.onload = function () { YourFunctionHere(); };
  3. Попробуйте другое тестовое изображение. В прошлом у меня были проблемы с отображением png, я изменил его на gif или jpg, и это сработало. Я не понимаю, как это было «путь назад», но, похоже, это больше не проблема, но эй … что-то попробовать.
  4. попробуйте полный URL
  5. использование https?
  6. попробуйте вставить изображение в другое место в вашей программе и посмотреть, что произойдет.
  7. попробуйте добавить это в свой HTML (поместите свой веб-сайт вместо моего — для получения дополнительной информации найдите БАЗОВЫЙ href в Google) 
     <BASE href="http://perrycs/" />
  8. Убедитесь, что изображение не скрыто за слоем (я знаю, что это работает в некоторых браузерах)
  9. сообщите нам веб-сайт, чтобы мы могли проверить его и получить дополнительную информацию, которая поможет вам в отладке этого, помогает просмотр контекста (окружающего кода)…

Ответ №2:

Учитывая, что это работает в других браузерах, при поиске по этой теме кажется, что часто проблема заключается в том, как IE кэширует изображения (см. комментарий Эпаскарелло). Ваш код такой же, как и у меня — он работает нормально, за исключением IE10.

Ответ №3:

Я тоже столкнулся с этой загадкой. Затем обнаружил, что он работает в «Инспекторе страниц», поэтому после некоторого копания обнаружил это (в Internet Explorer), перейдя в Tools.Параметры обозревателя.Дополнительно снимите флажок «Отключить отладку скриптов (Internet Explorer)» и флажок под ним.

Ответ №4:

Я обнаружил, что с IE9 после изменения image.src с

var strVar="C:Users/x/Desktop/caution.png"
image.src=strVar

и вызов оповещения (image.src) я бы получил что-то вроде этого в окне оповещения:

файл:/// C:Users/x/ Desktop/»C:Users/x/Desktop/caution.png «

Итак, я попытался image.src=strVar.replace(/"/g,"") удалить qoutemarks, и это сработало! предупреждение (image.src)

файл:///C:Users/x/ Desktop/внимание.png

Метки: