Изображение тега не показывает изображение, читает "Источник 0x0" - PullRequest
Новая
       50

Изображение тега не показывает изображение, читает "Источник 0x0"

0 голосов
/ 20 октября 2018

Мой клиент подчеркнул, что изображения на их сайте размыты, поэтому я пытаюсь решить эту проблему.Согласно моим исследованиям, один способ - создавать изображения разных размеров для каждого устройства (маленькое, среднее, большое) с помощью тега <picture>.Однако при использовании инструментов разработчика мои изображения вообще не отображаются, например, "Source 0x0.". То же самое происходит, когда на мобильных или планшетных устройствах всегда выбирается изображение по умолчанию, а не соответствующее изображение.Я исследовал эту проблему и не смог найти адекватного ответа для своего случая.Я даже пытался изменить свой путь, ничего.Я использую только HTML для этой части.Любая помощь приветствуется.

Кроме того, если кто-то может порекомендовать более эффективный способ сделать изображения более четкими и менее размытыми, пожалуйста, укажите мне правильное направление.Я слышал об использовании SVG, но не могу найти твердый совет по этому методу.

HTML 

    <div class="view3">
        <div class="content5_items">
            <h1 class="text-center">Sign Up</h1>
            <br>
            <p class="text-center">Join Wanzeru Now</p>
            <br>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 col-sm-6 d-flex justify-content-end">
                        <picture>
                             <source media="(max-width: 480px)" srcset="img/sign_upSmall.png">
                             <source media="(max-width: 768px)" srcset="img/sign_upMed.png">
                            <img src="img/sign_up.png" alt="pic"> <!--this image is only being applied -->
                        </picture>

                    </div>
                    <div class="col-md-6 justify-content-md-start justify-content-center d-flex text-center" style="margin-top: 50px;">
                        <form>
                            <div class="form-group">
                                <input type="name" class="form-control" id="exampleInputName" aria-describedby="emailHelp" placeholder="Name">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" id="exampleInputEmail" placeholder="Email">
                            </div>
                            <button type="submit" class="btn" style="background-color: #D34ED5; color:#fff; margin-bottom: 70px; width: 190px;">Sign up</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

enter image description here

1 Ответ

0 голосов
/ 20 октября 2018

Вы получаете эту ошибку из-за этой строки: 

<!--<img src="img/sign_up.png" alt="pic">-->

Вы должны иметь тег img в вашем picture, иначе ничего не будет отображаться.Если вы раскомментируете эту строку, она должна работать.Также у вас есть опечатка на пару строк выше: 

<source media="(max-with: 480px)" srcset="img/sign_upSmall.png">

должно быть: 

<source media="(max-width: 480px)" srcset="img/sign_upSmall.png">

Из спецификации HTML :

Модель содержимого элемента picture: ноль или более элементов <source>, за которыми следует один элемент <img>.

Рабочий фрагмент ниже с простым примером, практически идентичным приведенному выше коду: 

<picture>
  <source
    media="(max-width: 480px)"
    srcset="https://source.unsplash.com/random/200x200"
  >
  <source
    media="(max-width: 768px)"
    srcset="https://source.unsplash.com/random/400x400"
  >
  <img src="https://source.unsplash.com/random/600x600">
</picture>

Над фрагментом, проверенным в devtools, очистка, показывающая наименьшее изображение (200x200), а тег source по-прежнему имеет ширину 0 и высоту 0:

working picture tag with

...