图片标签不显示图像，读取“源 0x0”

Question

我的客户强调他们网站中的图像模糊，因此我正在尝试解决此问题。根据我的研究，一种方法是使用<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>

Answer 1

由于这一行，您会收到该错误：

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

你必须在你的picture 中有一个img 标签，否则什么都不会渲染。如果您取消注释该行，它应该可以工作。另外，您在上面的几行中有错字：

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

应该是：

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

来自HTML spec：

picture 元素内容模型： 零个或多个 <source> 元素，后跟一个 <img> 元素。

下面的工作 sn-p 与上面的代码几乎相同的简单示例：

<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 中检查 sn-p 上方，清除显示最小图像 (200x200) 并且 source 标记仍然具有 0 宽度和 0 高度：