如何修正HTML picture元素srcset路径使图片正常显示？

你的问题主要出在图片路径错误，另外需要确认media查询的匹配逻辑，以下是具体修正方案：

核心问题点 #

1. 路径拼写与大小写不匹配
   你代码中写的AltSchools_HTML_Assignments和实际文件夹名altschool_html_assignments存在两处差异：首字母大写、多了一个s，系统文件路径区分大小写，这会直接导致浏览器无法定位资源。
2. 路径层级冗余
   HTML文件本身就存放在Assignment_2文件夹内，不需要回退到上一级目录再重新定位Assignment_2，直接从当前目录访问同级的assets文件夹即可。

修正后的代码 #

<picture>
  <source
    media="(max-width: 570px)"
    srcset="./assets/images/me_1.jpg"
  />
  <source
    media="(max-width: 800px)"
    srcset="./assets/images/me_2.jpg"
  />
  <img
    src="./assets/images/me_new.jpg"
    alt="Andre's Picture"
  />
</picture>

额外说明 #

当前source标签的顺序是正确的：浏览器会从上到下匹配第一个符合media规则的资源，先定义小屏幕规则，再定义较大屏幕规则，能避免范围覆盖导致小屏幕规则无法触发。

内容的提问来源于stack exchange，提问作者Andrecon