Блог

 <img id="myImage" src="C:Users81001876DesktopOff.png" style="width:100px">

<button onclick="document.getElementById('myImage').src='C:Users81001876DesktopOn.png'">Turn on the light</button>


<button onclick="document.getElementById('myImage').src='C:Users81001876DesktopOff.png'"> Turn off the light</button>
  

JavaScript не может изменить значение атрибута src изображения

Первое препятствие, которое необходимо преодолеть, — это распознавание разделителей обратной косой черты в пути к файлу изображения в строке JavaScript: если вы используете перед символом, который не является специальным в строках JavaScript, обратная косая черта игнорируется без создания ошибки.

Например, исходная строка "C:Users81001876DesktopOn.png" декодируется компилятором JavaScript как

 C:Users81001876DesktopOn.png
  

Варианты выбора — либо обратная косая черта, либо экранирование обратных косых черт в исходном коде:

 C:\Users\81001876\Desktop\On.png
  

или преобразовать их в прямые косые черты, потому что (в наши дни) Windows принимает разделители прямой или обратной косой черты в путях к файлам. Например.

C:/Users/81001876/Desktop/On.png

После устранения проблемы с обратной косой чертой абсолютные пути к файлам Windows не являются допустимым href значением и должны быть преобразованы для использования file:// протокола перед установкой src атрибутов изображения: Например.

 sr="file:///C:/Users/81001876/Desktop/On.png"
  

Обратите внимание, что file:// URL-адреса на основе протокола не принимают разделители обратной косой черты, что означает, что есть преимущества в преобразовании их в прямые косые черты на ранней стадии.

Не выдерживая вышеуказанного, Microsoft использовала поддержку имен файлов Windows в некоторых версиях IE. Это было и остается нестандартным и не должно использоваться за пределами лаборатории кода.