Изображения не отображаются на локальном хосте

#html #image

Вопрос:

Я пытаюсь отобразить пару изображений на локальном хосте, но они всегда отображаются в виде маленького значка с фотографией. Все работает, кроме изображений.

 <script>
        function light(sw) {
            var pic;
            if(sw == 0) {
                pic = "pic_bulboff.gif";
            } else {
                pic = "pic_bulbon.gif";
            }
            document.getElementById("Blub").src = pic;
        }


    </script>
    <img id="Bulb" src="pic_bulboff.gif" width="100" height="100">

    <p>
        <button type="button" onclick="light(0)">Turn bulb off</button>
        <button type="button" onclick="light(1)">Turn bulb on</button>
    </p>
 

Файлы изображений находятся в той же папке, что и мой .html, поэтому у него не должно быть проблем с направлением. И все картинки названы правильно. Я искал решение и нашел много людей с похожими проблемами, но не решение. Есть какие-нибудь идеи о том, почему это происходит?

Вот моя папка с файлами.

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

1. Можете ли вы добавить изображение всех файлов в папку, содержащую ваши html-файлы и изображения?

2. @SidarthNuthi Я прикрепил фотографию своего рабочего пространства для файлов.

3. В вашем коде есть опечатка. id="Bulb" , и getElementById("Blub")

Ответ №1:

Это может быть проблемой с рендерингом, так как вы вызываете изображение в js до его рендеринга. Поместите тег изображения перед тегом сценария.