Img标签无法加载含src属性图片的技术求助

嘿，别慌！刚学编程的时候这种图片加载问题真的超常见，咱们一个个排查可能的原因：

• 检查图片路径是否正确
  你用的是相对路径IMG_0017.jpg，这意味着图片文件必须和你的HTML文件放在同一个文件夹里。如果图片在子文件夹（比如images）里，路径要改成src="images/IMG_0017.jpg"；如果在上一级文件夹，就是src="../IMG_0017.jpg"。另外注意文件名的大小写——Windows系统不敏感，但Mac/Linux会区分IMG_0017.jpg和img_0017.jpg，一定要完全匹配。

• 确认图片文件本身没问题
  先双击你的IMG_0017.jpg看看能不能正常打开，会不会是文件损坏了？另外检查后缀名是不是正确，比如有没有把PNG文件误命名成JPG，或者反过来。

• 强制刷新浏览器缓存
  有时候浏览器会缓存“图片加载失败”的状态，就算你修复了路径也不会更新。试试按Ctrl+Shift+R（Windows）或者Cmd+Shift+R（Mac）强制刷新页面，看看占位轮廓会不会回来。

• 排查CSS样式的影响
  虽然你的代码片段里没写CSS，但有可能全局样式或者父元素的样式把图片隐藏了。右键页面→选择“检查”，找到这个<img>标签，看看右侧的样式面板里有没有display: none、opacity: 0或者visibility: hidden这类属性，如果有的话去掉就行。

• 临时添加alt属性辅助排查
  建议给你的img标签加个alt属性，比如：

  <img src="IMG_0017.jpg" alt="作者头像" width="300px" height="300px">
  

  这样如果图片加载失败，至少会显示alt文字，能帮你确认是路径问题还是其他问题。

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