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

Question

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

4

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

- Alexandra

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pretzelhammer · Accepted Answer

You're getting that error because of this line:

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

如果您的图片标签中没有包含img标签，那么将无法渲染任何内容。如果您取消注释该行，则应该可以正常工作。另外，在几行之前您有一个拼写错误:

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

should be:

<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>

在开发工具中检查上面的代码片段，清晰地展示了最小的图片（200x200），而且source标签仍然有0宽度和0高度：