Изображения не отображаются независимо от пути - PullRequest
Новая
       51

Изображения не отображаются независимо от пути

2 голосов
/ 12 ноября 2019

Я только что запустил очень простой сайт с 5 изображениями. 4 изображения не отображаются независимо от пути в теге img. 5-е изображение всегда отображается независимо от пути в теге img.

Я пробовал "images / imagename.jpg", "/images.imagename.jpg", "../images.imagename.jpg". Я попытался поместить изображения в корень и использовать src = "imagename.jpg".

Изображения, которые не отображаются, имеют в консоли это предупреждение: enter image description here

Вот текущий код: http://avalynncirce.com/perduco

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {max-height: 100vh;}
        </style>
    </head>
    <body>

        <div style="width:20%; float:left; position: fixed;">
            <nav>
                <ul>
                    <li><a href="#sv1">Workflow v1 Scatterplot</a></li>
                    <li><a href="#mv1">Workflow v1 Menu</a></li>
                    <li><a href="#sv2">Workflow v2 Scatterplot</a></li>
                    <li><a href="#mt">Collaboration Tool: Sketch (MAC and Online)</a></li>
                    <li><a href="#mt2">Collaboration Tool Tool: Figma (Windows)</a></li>
                </ul>
            </nav>
        </div>

        <div style="width:75%; float:right;">
            <section id="sv1">
                <hr style="margin: 50px;">
                <img src="/images/scatterplotv1.png">
            </section>

            <section id="mv1">
                <hr style="margin: 50px;">
                <img src="../images/menuv1.png">
            </section>

            <section id="sv2">
                <hr style="margin: 50px;">
                <img src="../images/perduco.png">
            </section>

            <section id="mt">
                    <hr style="margin: 50px;">
                    <img src="../images/perduco-sketch.png">
            </section>

            <section id="mt2">
                    <hr style="margin: 50px;">
                    <img src="../images/figma.png">
            </section>

        </div>

    </body>
</html>

Ответы [ 2 ]

0 голосов
/ 12 ноября 2019

Этого раньше никогда не было, и я не уверен, почему это произошло на этот раз, но рассматриваемые файлы изображений были настроены как частные. Я использую Filezilla для загрузки файлов. Щелчок правой кнопкой мыши по изображению сервера вызвал меню, в котором я мог изменить настройки конфиденциальности.

enter image description here

0 голосов
/ 12 ноября 2019

«../ images / imagename.jpg» будет искать его в корневой папке (или на одну папку выше «/ images»). Я всегда использую «./images/imagename.jpg», и это всегда работает.

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

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

...