搭建带动效画廊的作品集网站时图片无法显示仅展示替代文本求助

• 检查标签语法错误：你现有代码中class="imgr"与src属性之间未留空格，会导致浏览器属性识别异常，修正后的代码如下：

<div class="section1">
  <img class="imgr" src="photo_1.jpg" alt="nothing">
</div>

• 核对相对路径基准：相对路径的计算基准是当前HTML文件的存储位置，而非VS Code工作区根目录，如果photo_1.jpg存放在单独的资源文件夹（比如名为img的文件夹），需要将路径修改为./img/photo_1.jpg；如果图片和HTML文件不在同级目录，按实际层级调整路径写法即可。
• 检查文件名大小写匹配：Windows系统对文件名大小写不敏感，但macOS、Linux服务器以及部分预览服务会严格校验大小写，如果你的图片实际文件名是Photo_1.jpg、photo_1.JPG这类大小写不一致的命名，也会导致加载失败，建议统一将图片文件名和后缀改为小写。
• 验证图片文件完整性：直接在系统文件管理器中打开目标图片，确认文件没有损坏，同时确认后缀名和图片实际格式匹配，不要强行修改后缀名（比如将png文件直接改后缀为jpg）。
• 本地路径测试：可以先用图片的本地绝对路径测试加载情况，如果绝对路径可以正常加载，即可定位问题出在相对路径配置上，再逐步调整路径写法即可。
• 框架规则适配：如果你是用Vue、React等前端框架搭建的项目，需要确认框架的静态资源存放规则，大部分框架需要将可直接访问的静态资源放在指定的public目录下，才能通过相对路径直接引入。

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