img не загружается при изменении изображения с помощью JavaScript

0

Это мой код, я не могу понять, что в этом плохого.

<html>
<body>
 <script type="text/javascript">
   function changeImage() {
     var image = document.getElementById('myImage');
     if (image.src.match("bulbon")) {
          image.src = "C:\Users\ashokch\Desktop\light_bulb_off3.jpg";
     } else {
       image.src = "C:\Users\ashokch\Desktop\bulbon.png";
    } 
 }
</script>

  <img id="myImage" onclick="changeImage()"
    src="C:\Users\ashokch\Desktop\light_bulb_off3.jpg"      width="100" height="180">


      <p>Click the light bulb to turn on/off the light</p>

      </body>
   </html>

Изображение по умолчанию отображается, когда страница появляется в браузере, но когда я нажимаю изображение, меняющееся изображение не загружается

  • 0
    Что не так: вы указываете на свою файловую систему, используя * c: * пути к файлам относительны при использовании HTML.
  • 0
    Вы должны выполнять действие на веб-сервере, а не из локальных файлов. Могу поспорить, что если вы изучите DOM, вы увидите изменения, они просто не будут работать так.
Показать ещё 2 комментария
Теги:

4 ответа

3

Вы не используете действительные файловые протоколы (файл:///C: /mydir/index.html) для доступа к файлам. Как говорили другие, переместите их "далее" в ваш html файл и просто используйте имя файла без пути (например, light_bulb_off3.jpg) или измените свои пути на что-то действующее (например, файл:///C: /Users/ashokch/Desktop/light_bulb_off3.jpg)

Поделиться
  • 0
    Да, я согласен здесь. Я столкнулся с подобной проблемой некоторое время назад. Либо поместите их в серверную среду, либо назовите относительный путь.
2

Попробуй это:

<img src="file:///C:/Users/ashokch/Desktop/light_bulb_off3.jpg">

Обратите внимание на обработчик протокола :///. И / (косая черта) вместо этого \ (обратная косая черта).

Он используется для отображения локальных файлов в вашем браузере.

Но это работает только для локальных файлов.

Если вы хотите, чтобы веб-сервер обслуживал эти изображения, создайте папку в корневой папке вашего веб-сервера.

пример

/images

И сохраните свои изображения в этой папке.

Затем укажите, что ваше изображение src или javascript соответствует абсолютному пути.

<img src="/images/my-image.jpg">

Это займет ваш текущий url, вычеркнет имя хоста и протокол и добавит src.

пример

http://www.example.org/folder/test.html

<img src="{http://www.example.org}/images/my-image.jpg">

<img src="{http://www.example.org/folder/}images/my-image.jpg">

<img src="http://www.some-image-host.com/xyz123.jpg">

Абсолютное означает, что протокол и имя хоста/путь.

Относительные средства относительно корня вашего текущего домена (без какого-либо пути).

Поделиться
1

Загрузите свои изображения на бесплатный хостинг-сайт, например: -

http://photobucket.com/ или https://imageshack.com/

Используйте новые веб-ссылки для изображений и проверьте, не работает ли это.

"bulbon"??? Что это?

Поделиться
  • 0
    Это «лампочка на».
  • 0
    Ладно ... мой плохой .. :)
0

Ваш путь к образцу должен быть относительно вашего каталога project/code вместо файловой системы. Либо скопируйте изображения в каталог проекта, либо укажите относительный путь. Это решило бы проблему.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню