HTML ошибка, изображение не отображается в Google Chrome

Question

Я пытаюсь сделать сайт для компании моего друга Graphi c Design.

Я продолжаю получать эту ошибку, когда <img> и <video> просто отображают мой контейнер без каких-либо изображений / видео в нем, просто черный ящик. Даже не мой Альт ?? У меня никогда не было такого раньше.

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

Мой вопрос: как мне отладить это / как мне заставить его просто отображать мои фотографии? в моем контейнере.

Редактировать: я 2-й курс CompSci, но я новичок в HTML / CSS

Мое изображение и mp4 находятся в одной директории моего индекса. html в img и vids папка:

• веб-сайт / img / Sunburnt.jpg
• веб-сайт / vids / statuspr.mp4

• веб-сайт / индекс. html

     <div class="col project-wrap">
          <div class="col__item project">
              <div class="project__count"><span class="project__count-current reveal">02</span><span class="project__count-total reveal">/ 28</span></div>
              <a class="project__image noselect" target="_blank" href="#">
                  <div class="project__image-container plane plane--media">
                      <!-- The preferred img, mp4s -->
                      <img src="/img/Sunburnt.jpg" alt="Sunburnt Breakfast Rave" />
                      <video src="vids/statuspr.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
                  </div>
  
              </a>
              <div class="project__meta">
                  <h3 class="project__meta-title plane">Canberra Rave Scene</h3>
                  <div class="project__meta-tags">
                      <div class="reveal"><span>Social Media</span><span>Entertainment</span><span>Rave</span>
                      </div>
                      <div class="reveal"><span>Visuals</span><span>DJ</span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  

Answer 1

Таким образом, я смог исправить это, создав новый контейнер (project__image-container2), который использовал менее сложную реализацию CSS в моей таблице стилей.

Я также изменил свой sr c с data-sr c и просто включил мои изображения и видео в мой проект. Комбинация этих двух решений решила мою проблему - я не мог отображать изображения и видео без этих контейнеров - однако мой веб-сайт теперь загружает упомянутые видео и изображения довольно медленно. Однако это то, что я могу попытаться исправить позже.

<!-- Project 1: Sunburnt Breakfast -->
    <div class="section section--work" data-label="Project 01">
        <div class="col project-wrap">
            <div class="col__item project">
                <div class="project__count"> <span class="project__count-current reveal">02</span><span class="project__count-total reveal">/ 28</span></div>
                <a class="project__image noselect" target="_blank" href="website-I-don't-want-the-world-to-know-about">
                    <div class="project__image-container2 plane">

                        <video src="vids/visualsTrim.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
                        <noscript>
                        <video src="vids/visualsTrim.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
                    </noscript>
                    </div>

                </a>
                <div class="project__meta">
                    <h3 class="project__meta-title plane">Canberra Rave Scene</h3>
                    <div class="project__meta-tags">
                        <div class="reveal"><span>Social Media</span><span>Entertainment</span><span>Rave</span>
                        </div>
                        <div class="reveal"><span>Visuals</span><span>DJ</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="section__nav section__nav--left noselect clickable"><span class="text--giant text--bold"><span>Back</span></span></button>
        <button class="section__nav section__nav--right noselect clickable"><span class="text--giant text--bold"><span>Next</span></span></button>
    </div>

Я надеюсь, что это поможет любому, кто столкнется с этой нишевой проблемой. Напишите мне или прокомментируйте, и я постараюсь помочь вам, если вы тоже боретесь с этой проблемой

Спасибо всем, кто помог мне попасть сюда. Люблю мое сообщество stackoverflow !!! Yall the best xx

Answer 2

Я не могу комментировать, поэтому я пытаюсь ответить, даже если он не ясен на 100%: просто глядя на ваш код:

вы используете / перед папкой img только с изображением. Если вы не смотрите на файл с сервера, это даст отладку 404 ..

с использованием F12 и просмотр сетевых ошибок или ошибок консоли