图片标记未显示图像，读取为“源0x0”

Question

我的客户强调他们网站中的图像模糊，因此我正在尝试解决此问题。根据我的研究，一种方法是使用"Source 0x0."标签为每个设备（小，中，大）创建不同大小的图像。但是，在使用开发人员工具时， <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> 中的图片根本无法显示，这是在移动设备或平板电脑上始终选择默认图像而不是适当的图像时发生的。我已经研究了这个问题，但是找不到适合我的情况的答案。我什至试图改变自己的道路，一无所获。我只在这部分使用HTML。任何帮助表示赞赏。

此外，如果有人可以推荐一种更有效的方法来使图像更清晰和更少模糊，请指向正确的方向。我听说过使用SVG，但在这种方法上找不到可靠的建议。

HTML

SharedPreferences.Editor editor = getSharedPreferences(PREF_FILE_NAME, MODE_PRIVATE).edit();
editor.putString("key_points", "5"); // value to store
editor.apply();

Answer 1

由于此行，您收到该错误：

<!--<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 spec：

  

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高度：